Home
Anonymous
justify between

justify between

This tailwind example is contributed by Anonymous, on 17-May-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Card

Author Anonymous

118

Fork Fullscreen

<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 h-96">
      <div class="flex flex-col justify-between h-full">
        <div>
          <div class="space-y-6 py-8 text-base leading-7 text-gray-600">
            <p>An advanced online playground for Tailwind CSS, including support for things like:</p>
            <ul class="space-y-4">
              <li class="flex items-center">
                <svg class="h-6 w-6 flex-none fill-sky-100 stroke-sky-500 stroke-2" stroke-linecap="round" stroke-linejoin="round">
                  <circle cx="12" cy="12" r="11" />
                  <path d="m8 13 2.165 2.165a1 1 0 0 0 1.521-.126L16 9" fill="none" />
                </svg>
                <p class="ml-4">
                  Customizing your
                  <code class="text-sm font-bold text-gray-900">tailwind.config.js</code> file
                </p>
              </li>
              
            </ul>
          </div>
        </div>

<div class="pt-8 text-base font-semibold leading-7">
          <p class="text-gray-900">Want to dig deeper into Tailwind?</p>
          <p>
            <a href="https://tailwindcss.com/docs" class="text-sky-500 hover:text-sky-600">Read the docs &rarr;</a>
          </p>
        </div>
      </div>
  </div>
</div>

Related Examples

Information card

Author:
Samuel Dawson

3 years ago

12.3k
home
html , css

Author:
Hacker Development

10 months ago

1.9k
Spinner with card
Use this animated loading indicator when content inside of a card is still loading.

Author:
Md. Tofayel islam

1 year ago

3.3k
animated blog cards with Tailwind CSS

Author:
Michael Andreuzza

1 year ago

5.3k
Dynamic Service Showcase with Interactive Flip Cards
This component presents a visually engaging service section featuring interactive flip cards. Each service card displays an image on the front and reveals details on the back when hovered over. The layout is responsive, ensuring seamless adaptability across various screen sizes. The hover effect adds a modern and engaging touch, enhancing user interaction.

Author:
Vikas Kushwah

11 months ago

1.6k
Image card

Author:
Laurits

3 years ago

17.6k
Card
Card with Likes and download Button

Author:
Mrunal Solkar

2 years ago

10.8k
Card template

Author:
Raul antonio de la cruz hernandez

2 months ago

78
Profile Card
User Profile Card with Name and Location

Author:
Anubhav Ranjan

1 year ago

2.5k
Latest Blog Card Components
Stay ahead of the curve with fresh content on code, design, startups, and everything in between.

Author:
Alif Bima Pradana

1 month ago

89
Astro build starter template with Tailwind
Astro build starter template with Tailwind

Author:
Geoffrey Callaghan

2 years ago

4.1k
Card-Product
Item or card to show products

Author:
Ameth Galarcio

1 year ago

4.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components