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.3k

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

Invoice
Invoice

Author:
Ameth Galarcio

1 year ago

2.4k
Fully Animated Timeline Card
It is at a 20s interval for testing purposes. Go to the <style> and change the .content-scroll class from 20s to 35s for a production ready slower animation.

Author:
Coastal UI

10 months ago

1.4k
cards
cards slices

Author:
Anonymous

1 year ago

6.5k
Card Item Financieros
Item Financiero

Author:
Ameth Galarcio

1 year ago

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

Author:
Maxim

1 year ago

12.1k
Pricing card
basic pricing card with single price

Author:
Amit Pachange

2 years ago

10.5k
Hotel rooms
A simple room overview

Author:
Matti

8 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.1k
split bg

Author:
Anonymous

3 months ago

216
Watch Card
Watch Cards

Author:
Anonymous

11 months ago

1.5k
Dynamic Google Card

Author:
Cristian

6 months ago

859
Profile Card with Transparent
Dynamic Background: Darker gradient background for better contrast Floating colored blobs for visual interest Profile Image Glow: Added a gradient glow effect behind the profile picture Smoother hover transition Typography Improvements: Larger, bolder name text Subtle hover underline animation for the name Better spacing and hierarchy

Author:
KULDEEP

2 months ago

268

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components