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

Watch Card
Watch Cards

Author:
Anonymous

1 year ago

1.8k
Beautiful and Responsive Card Component
Modern, professional and responsive card component for the blog/services/info

Author:
Rajesh Maheshwari

9 months ago

945
beautifull project Item

Author:
Akram Khan

1 year ago

2.1k
Elegant Cards
Useful Tailwind classes for creating several types of cards. Ranging from simple text to more complex cards with animations and video.

Author:
Nick Girga

7 months ago

576
Coming Soon Section
Simple and beautiful card for your showing on your projects (in development) home screen

Author:
Noob

3 years ago

10.4k
Author card
Author card for giving credit to the author of the Blog/Article. It has social media icons and user image

Author:
Prajwal Hallale

2 years ago

7.4k
Information card

Author:
Samuel Dawson

3 years ago

12k
Call to action card with image
Responsive card with image

Author:
Noah Schmidt

2 years ago

16.1k
Video card
Video card component for tailwind css

Author:
Rajesh kulkarni

2 years ago

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

Author:
farid

1 month ago

267
Profit Card
Profit card with deatils

Author:
dongol heart

1 year ago

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

Author:
Robert Chunga

1 year ago

2.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components