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

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

Best incamas to date

Author:
ORGIN_DREAMS

1 month ago

113
Tailwind CSS Book

Author:
Michael Andreuzza

1 year ago

2.1k
Feature Card
Shows off a feature, great for homepages and grid layout, or can be used in dashboards for "example use" grids. Enjoy! Part of the Coastal UI collection.

Author:
Coastal UI

2 months ago

226
CONTACT US - GET IN TOUCH - PORTFOLIO
Responsive "Contact us" section, dark-mode-friendly contact area featuring stylish cards with icons displaying essential contact details.

Author:
ABDO-SY

4 months ago

848
Product hunt showcase section

Author:
Leon Bachmann

2 years ago

9.7k
LinkedIn Post UI Mockup
A static HTML and Tailwind CSS component designed to replicate the user interface of a LinkedIn post. This mockup accurately represents the post structure including the header (avatar, name, headline, timestamp), content area (text, optional media), engagement statistics (likes, comments, reposts), and the action bar (Like, Comment, Repost, Send). It's fully responsive, supports light and dark themes, and uses appropriate iconography and styling to closely mimic the LinkedIn feed experience.

Author:
Hamza Atig

2 months ago

372
Game Live Score
A live score game layout design perfect for your live scoring application

Author:
Diavox Jerome Soriano

4 months ago

210
Admin dashboard cards
Card groups for showing stats/info. Change it for responsiveness for small and medium screen

Author:
farisubuntu

11 months ago

1.8k
Responsive Projects Section

Author:
ᴀʀ!ᴀ

2 months ago

455
Pricing section Lima
Pricing section Lima with responsive design

Author:
Mubashir hussain

1 year ago

2.1k
Card with image full width
This component is a card designed for showcasing featured blog posts. It includes the post title, a captivating image, category links, and author details.

Author:
Mr Robot

2 years ago

13k
Department Card

Author:
Ashok Kumar

11 months ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components