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

3D Amazing Product Card
Here's a stunning 3D product card with hover effects, 3D rotation, and a clean modern design using HTML, CSS (Tailwind), and a bit of JavaScript for the interactive 3D effect:

Author:
Nicole Shalom

8 months ago

1.3k
Author box

Author:
Mr Robot

3 years ago

12.2k
Card grid section
Display article/blog grid

Author:
Mr Robot

3 years ago

29.5k
Expandable Card
An expandable card using tailwind + alpine to show additional information when it is open

Author:
farid

4 months ago

397
less is more
less is more by salvator

Author:
Baraka Salvator

7 months ago

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

Author:
RShubham kumar

2 years ago

4.6k
Pricing Table

Author:
Akshay

3 years ago

11k
Info Card
Information card with image

Author:
Brandon D

3 years ago

9.8k
Card Cartier Product
Card Based View of Cartier

Author:
Ameth Galarcio

1 year ago

955
Carousel Card Slider Swiper on Alpine.JS
with support drag and drop mouse actions

Author:
Maxim

1 year ago

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

Author:
Anonymous

2 years ago

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

Author:
farisubuntu

1 year ago

2.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components