|
<!-- |
|
Welcome to Tailwind Play, the official Tailwind CSS playground! |
|
|
|
Everything here works just like it does when you're running Tailwind locally |
|
with a real build pipeline. You can customize your config file, use features |
|
like `@apply`, or even add third-party plugins. |
|
|
|
Feel free to play with this example if you're just learning, or trash it and |
|
start from scratch if you know enough to be dangerous. Have fun! |
|
--> |
|
<div class="relative flex min-h-screen flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12"> |
|
<img src="/img/beams.jpg" alt="" class="absolute top-1/2 left-1/2 max-w-none -translate-x-1/2 -translate-y-1/2" width="1308" /> |
|
<div class="absolute inset-0 bg-[url(/img/grid.svg)] bg-center [mask-image:linear-gradient(180deg,white,rgba(255,255,255,0))]"></div> |
|
<div class="relative bg-white px-6 pt-10 pb-8 shadow-xl ring-1 ring-gray-900/5 sm:mx-auto sm:max-w-lg sm:rounded-lg sm:px-10"> |
|
<div class="mx-auto max-w-md"> |
|
<ul> |
|
<li class="relative h-24 border-l-2 border-indigo-700 pl-7"> |
|
<div class="circle absolute -left-[1.15rem] flex h-9 w-9 items-center justify-center rounded-full bg-indigo-700"> |
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-5 w-5 text-white"> |
|
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /> |
|
</svg> |
|
</div> |
|
<div> |
|
<span class="text-sm font-semibold">Lorem ipsum dolor sit amet.</span> |
|
<p class="text-xs text-gray-700">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt placeat architecto quia. Error, consequuntur ipsa.</p> |
|
</div> |
|
</li> |
|
<li class="relative h-24 border-l-2 border-gray-300 pl-7"> |
|
<div class="circle absolute -left-[1.15rem] flex h-9 w-9 items-center justify-center rounded-full border-2 border-indigo-700 bg-white"> |
|
<div class="circle2 h-3 w-3 rounded-full bg-indigo-700"></div> |
|
</div> |
|
<div> |
|
<span class="text-sm font-semibold text-indigo-700">Lorem ipsum dolor sit amet.</span> |
|
<p class="text-xs text-gray-700">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt placeat architecto quia. Error, consequuntur ipsa.</p> |
|
</div> |
|
</li> |
|
<li class="relative h-24 border-l-2 border-gray-300 pl-7"> |
|
<div class="circle absolute -left-[1.15rem] flex h-9 w-9 items-center justify-center rounded-full border-2 border-gray-300 bg-white"></div> |
|
<div class="text-gray-400"> |
|
<span class="text-sm font-semibold">Lorem ipsum dolor sit amet.</span> |
|
<p class="text-xs">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt placeat architecto quia. Error, consequuntur ipsa.</p> |
|
</div> |
|
</li> |
|
<li class="relative h-24 pl-7"> |
|
<div class="circle absolute -left-[1.15rem] flex h-9 w-9 items-center justify-center rounded-full border-2 border-gray-300 bg-white"></div> |
|
<div class="text-gray-400"> |
|
<span class="text-sm font-semibold">Lorem ipsum dolor sit amet.</span> |
|
<p class="text-xs">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt placeat architecto quia. Error, consequuntur ipsa.</p> |
|
</div> |
|
</li> |
|
</ul> |
|
</div> |
|
</div> |
|
</div> |
