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

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

Interactive Pricing Cards
this are pricing cards

Author:
ishimwe shadad

1 month ago

22
Card
Simple Card

Author:
Ashraf ali

4 months ago

717
Card with Thumbnail
Post card with image

Author:
Mr Robot

2 years ago

10.8k
payment card
A payment card is a type of card issued by a financial institution (like a bank) that allows the cardholder to make financial transactions. These transactions can include purchasing goods and services, withdrawing cash, or transferring money. Here’s a description based on the main types of payment cards:

Author:
dev-fab250

1 month ago

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

Author:
Diavox Jerome Soriano

4 months ago

210
Form package

Author:
Hunter Guru

1 year ago

2.2k
Tailwind image slider
slider with navigation buttons and info about image

Author:
Anonymous

1 year ago

19.4k
Blog post card
Responsive blog post or article card. This card can also be used as a CTA

Author:
Anonymous

1 year ago

9.6k
Login form

Author:
Rajesh Maheshwari

3 months ago

733
Landing page

Author:
Maxim

3 months ago

838
Tailwind CSS Service Card Component
An HTML and Tailwind CSS code snippet for creating a responsive service card component. Ideal for marketplaces, portfolios, or listing pages. Includes sections for image/video preview, seller info, rating, pricing, and additional details. Easy to customize using Tailwind utility classes.

Author:
Hamza Atig

2 months ago

517
Drinkware landing page

Author:
Maxim

3 months ago

559

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components