Home
Geoffrey Callaghan
Astro build starter template with Tailwind

Astro build starter template with Tailwind

This tailwind example is contributed by Geoffrey Callaghan, on 26-Jan-2024. Component is made with Tailwind CSS v3. It is responsive.

Card

Author Geoffrey Callaghan

3.6k

Fork Fullscreen

<div class="relative mt-6 flex w-96 flex-col rounded-xl bg-white bg-clip-border text-gray-700 shadow-md">
  <div class="p-6">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="currentColor"
      aria-hidden="true"
      class="mb-4 h-12 w-12 text-pink-500"
    >
      <path
        fill-rule="evenodd"
        d="M9.315 7.584C12.195 3.883 16.695 1.5 21.75 1.5a.75.75 0 01.75.75c0 5.056-2.383 9.555-6.084 12.436A6.75 6.75 0 019.75 22.5a.75.75 0 01-.75-.75v-4.131A15.838 15.838 0 016.382 15H2.25a.75.75 0 01-.75-.75 6.75 6.75 0 017.815-6.666zM15 6.75a2.25 2.25 0 100 4.5 2.25 2.25 0 000-4.5z"
        clip-rule="evenodd"
      ></path>
      <path d="M5.26 17.242a.75.75 0 10-.897-1.203 5.243 5.243 0 00-2.05 5.022.75.75 0 00.625.627 5.243 5.243 0 005.022-2.051.75.75 0 10-1.202-.897 3.744 3.744 0 01-3.008 1.51c0-1.23.592-2.323 1.51-3.008z"></path>
    </svg>
    <h5 class="mb-2 block font-sans text-xl font-semibold leading-snug tracking-normal text-blue-gray-900 antialiased">
      Astro build starter template with Tailwind
    </h5>
    <p class="block font-sans text-base font-light leading-relaxed text-inherit antialiased">
      Jumpstart your next Astro build Project
    </p>
  </div>
  <div class="p-6 pt-0">
    <a
      class="!font-medium !text-blue-gray-900 !transition-colors hover:!text-pink-500"
      href="#"
    >
      <a href="https://astrolize.fabform.io"
        class="flex select-none items-center gap-2 rounded-lg py-2 px-4 text-center align-middle font-sans text-xs font-bold uppercase text-pink-500 transition-all hover:bg-pink-500/10 active:bg-pink-500/30 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
        type="button"
        data-ripple-dark="true"
      >
        Astro Starter Template
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="2"
          stroke="currentColor"
          aria-hidden="true"
          class="h-4 w-4"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3"
          ></path>
        </svg>
      </button>
    </a>
  </div>
</div>

<link
  rel="stylesheet"
  href="https://unpkg.com/@material-tailwind/html@latest/styles/material-tailwind.css"
/>

Related Examples

Contact us form with map
Contact us form with map

Author:
Chithira Kumar M

2 years ago

12k
E-commerce cards
E-commerce responsive cards with dark mode

Author:
Robert Chunga

1 year ago

2.3k
Product Card

Author:
Maxim

8 months ago

1.4k
Responsive Feature Card

Author:
Gopi Yadav

3 years ago

13.3k
card
It's a product card

Author:
SAURAV SINGH

7 months ago

1.1k
Tour package card
This card could be used for featuring a product, service, or blog post:

Author:
Henrik R.

1 year ago

2.3k
Card with image
Blog post card

Author:
Mr Robot

2 years ago

10.3k
User profile card with Cover Image

Author:
Noob

3 years ago

31.2k
Website Pricing List Card Component
A Website Pricing List Card Component is a reusable UI element that displays pricing plans or packages on a website, typically for SaaS products, subscriptions, or service tiers. It helps users easily compare different pricing options and choose the best one.

Author:
dev-fab250

6 months ago

1.1k
Cards section - Sport

Author:
ABDO-SY

8 months ago

2.2k
Twitter Post (Tweet) UI Mockup
A detailed static HTML and Tailwind CSS component replicating the user interface of a single Twitter post (Tweet). This mockup includes the user avatar, tweet header (name, handle, timestamp), tweet text with styled hashtags/mentions, optional media display, and the action bar with icons and counts (Reply, Retweet, Like, Views, Share). It is responsive, supports light and dark modes, and uses accurate iconography and hover states to closely resemble the real Twitter UI.

Author:
Hamza Atig

7 months ago

472
Card grid for blog Posts / Articles

Author:
Abhijit Sen

2 years ago

23.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components