Home
Hunter Guru
Form package

Form package

This tailwind example is contributed by Hunter Guru, on 03-May-2024. Component is made with Tailwind CSS v3. It is responsive.

Card

Author Hunter Guru

2.6k

Fork Fullscreen

<div class="border-blue-600 rounded-2xl border  max-w-sm mx-auto"
    style="box-shadow: rgba(45, 50, 130, 0.15) 0px 12px 16px -4px, rgba(45, 50, 130, 0.15) 0px 4px 6px -2px;">
    <div class="pt-6 px-6">
      <div class="flex itmes-center">
          <span class="pr-2">
            <input id="default-checkbox" type="checkbox" value="" class="h-full text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
          </span>
          <h2 class="text-xl font-semibold text-gray-600">Package 1</h2>
      </div>
    </div>      
    <div class="px-6 pt-5 pb-8">
        <h3 class="text-sm font-medium text-gray-900">What's included</h3>
        <ul role="list" class="mt-4 space-y-4">
            <li class="flex space-x-3">
                <div class="flex justify-center items-center rounded-full bg-green-100 h-5 w-5"><svg
                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"
                        class="h-3 w-3 flex-shrink-0 text-green-500">
                        <path fill-rule="evenodd"
                            d="M20.707 5.293a1 1 0 010 1.414l-11 11a1 1 0 01-1.414 0l-5-5a1 1 0 111.414-1.414L9 15.586 19.293 5.293a1 1 0 011.414 0z"
                            clip-rule="evenodd"></path>
                    </svg>
                </div>
                <span class="text-sm text-gray-500">5 workspaces</span>
            </li>
            <li class="flex space-x-3">
                <div class="flex justify-center items-center rounded-full bg-green-100 h-5 w-5"><svg
                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"
                        class="h-3 w-3 flex-shrink-0 text-green-500">
                        <path fill-rule="evenodd"
                            d="M20.707 5.293a1 1 0 010 1.414l-11 11a1 1 0 01-1.414 0l-5-5a1 1 0 111.414-1.414L9 15.586 19.293 5.293a1 1 0 011.414 0z"
                            clip-rule="evenodd"></path>
                    </svg>
                </div>
                <span class="text-sm text-gray-500">Unlimited testimonials</span>
            </li>
        </ul>
    </div>
</div>

Related Examples

Beautiful info cards
Responsive and minimal design

Author:
Amit Pachange

3 years ago

10.5k
Horizontal card with image

Author:
Amit Pachange

3 years ago

15.1k
Card with link
This example can be used to show a CTA as a link instead of a button inside the card.

Author:
Md. Tofayel islam

1 year ago

2.6k
Meet the Team Section with Team Member Cards
Meet the Team Section with Team Member Cards

Author:
Mike Varen

1 year ago

4.4k
Coupon code card
Display Special Offer with Coupon Code

Author:
Dipti narayan

2 years ago

11.1k
Modern Responsive Pricing Section with Toggle
A sleek, responsive pricing section built with HTML and Tailwind CSS, showcasing three distinct plans (e.g., Free, Pro, Expert) in a card layout. It features a clean monthly/yearly toggle switch with savings indication, highlights a recommended plan with distinct styling and a badge, and uses checkmarks for clear feature comparison. The layout stacks vertically on smaller screens and transitions to a 3-column grid on large screens (lg breakpoint). Includes generic content for easy adaptation and a final "Compare Plans" button.

Author:
Hamza Atig

10 months ago

1.1k
Border gradient

Author:
Samuel Dawson

3 years ago

16.7k
Voucher Card

Author:
Adriano Monecchi

3 months ago

242
Dynamic Google Card

Author:
Cristian

1 year ago

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

Author:
Diavox Jerome Soriano

1 year ago

1k
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Author:
Ameth Galarcio

1 year ago

3.6k
omerlinkStream
omerlinkStream

Author:
Omer fils ELENGA

1 month ago

442

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components