Home
S V
Product Form - Reverie

Product Form - Reverie

This tailwind example is contributed by S V, on 06-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Author S V

512

<div style="--form-bg-color: #F4E8D7; --option-border-color: #E2D1BC;--primary-bg-color: #E2322F; --text-strike-color: #E2322F; --primary-text-color: #FFF3E1; --text-color: #93816D; --input-outline-color: #E2D1BC; --input-checked-color: #B29A7F; --input-checked-bg-color: #EADCCA;">
  <div class="t-bg-[--form-bg-color] t-border t-rounded-[25px] t-px-6 t-py-4 t-w-full t-mx-auto t-max-w-2xl t-text-[--text-color]">
    <h4 class="t-text-xl lg:t-text-2xl t-font-semibold t-mb-3">
      Choose an option:
    </h4>

<div class="t-grid t-gap-4">
      <label class="t-flex t-items-center t-border-[1.5px] t-border-solid t-border-[--option-border-color] t-rounded-[50px] t-px-5 t-py-3 t-my-0 t-cursor-pointer t-relative has-[:checked]:t-bg-[--input-checked-bg-color]">
        <span class="t-inline-flex t-items-center t-justify-center t-w-4 t-h-4 t-border-[1px] t-border-solid t-border-[--input-outline-color] t-rounded-full ">
          <input checked class="t-appearance-none t-w-2.5 t-h-2.5 t-aspect-square t-rounded-full checked:t-bg-[--input-checked-color]" type="radio" name="option1" />
        </span>
        <div class="option-wrap t-flex t-items-center t-justify-between t-w-full">
          <span class="t-pl-2">1 Pack</span>
          <div class="t-grid t-text-right t-leading-none">
            <strong>$39</strong>
          </div>
        </div>
        <span class="t-absolute t-left-1/2 -t-translate-x-1/2">Free Shipping</span>
      </label>

<label class="t-flex t-items-center t-border-[1.5px] t-border-solid t-border-[--option-border-color] t-rounded-[50px] t-px-5 t-py-3 t-my-0 t-cursor-pointer t-relative has-[:checked]:t-bg-[--input-checked-bg-color]">
        <span class="option-badge t-inline-block t-leading-[1.25] t-px-3 t-py-0.5 t-rounded-[15px] t-absolute t-top-0 t-left-1 -t-translate-y-1/3 t-bg-[--primary-bg-color] t-text-[--primary-text-color] t-text-[10px]">10% OFF Most Popular</span>
        <span class="t-inline-flex t-items-center t-justify-center t-w-4 t-h-4 t-border-[1px] t-border-solid t-border-[--input-outline-color] t-rounded-full ">
          <input class="t-appearance-none t-w-2.5 t-h-2.5 t-aspect-square t-rounded-full checked:t-bg-[--input-checked-color]" type="radio" name="option1" />
        </span>
        <div class="option-wrap t-flex t-items-center t-justify-between t-w-full">
          <span class="t-pl-2">2 Pack</span>
          <div class="t-grid t-text-right t-leading-none">
            <strong>$71.99</strong>
            <small class="t-line-through t-text-[--text-strike-color]">$80.00</small>
          </div>
        </div>
        <span class="t-absolute t-left-1/2 -t-translate-x-1/2">Free Shipping</span>
      </label>

<label class="t-flex t-items-center t-border-[1.5px] t-border-solid t-border-[--option-border-color] t-rounded-[50px] t-px-5 t-py-3 t-my-0 t-cursor-pointer t-relative has-[:checked]:t-bg-[--input-checked-bg-color]">
        <span class="option-badge t-inline-block t-leading-[1.25] t-px-3 t-py-0.5 t-rounded-[15px] t-absolute t-top-0 t-left-1 -t-translate-y-1/3 t-bg-[--primary-bg-color] t-text-[--primary-text-color] t-text-[10px]">15% OFF Best Value</span>
        <span class="t-inline-flex t-items-center t-justify-center t-w-4 t-h-4 t-border-[1px] t-border-solid t-border-[--input-outline-color] t-rounded-full ">
          <input class="t-appearance-none t-w-2.5 t-h-2.5 t-aspect-square t-rounded-full checked:t-bg-[--input-checked-color]" type="radio" name="option1" />
        </span>
        <div class="option-wrap t-flex t-items-center t-justify-between t-w-full">
          <span class="t-pl-2">3 Pack</span>
          <div class="t-grid t-text-right t-leading-none">
            <strong>$101.99</strong>
            <small class="t-line-through t-text-[--text-strike-color]">$120.00</small>
          </div>
        </div>
        <span class="t-absolute t-left-1/2 -t-translate-x-1/2">Free Shipping</span>
      </label>
    </div>

<h4 class="t-text-xl lg:t-text-2xl t-font-semibold t-mb-3">
      Frequency:
    </h4>

<div class="t-grid t-gap-4">
      <label class="t-flex t-items-center t-border-[1.5px] t-border-solid t-border-[--option-border-color] t-rounded-[50px] t-px-5 t-py-3 t-my-0 t-cursor-pointer t-relative has-[:checked]:t-bg-[--input-checked-bg-color]">
        <span class="t-inline-flex t-items-center t-justify-center t-w-4 t-h-4 t-border-[1px] t-border-solid t-border-[--input-outline-color] t-rounded-full ">
          <input checked class="t-appearance-none t-w-2.5 t-h-2.5 t-aspect-square t-rounded-full checked:t-bg-[--input-checked-color]" type="radio" name="frequency" />
        </span>
        <div class="option-wrap t-flex t-items-center t-justify-between t-w-full">
          <div class="t-grid t-text-right t-leading-none">
            <span class="t-pl-2"><strong>$71.99</strong></span>
          </div>
          <span>One-time purchase</span>
        </div>
      </label>

<label class="t-flex t-items-center t-border-[1.5px] t-border-solid t-border-[--option-border-color] t-rounded-[50px] t-px-5 t-py-3 t-my-0 t-cursor-pointer t-relative has-[:checked]:t-bg-[--input-checked-bg-color]">
        <span class="t-inline-flex t-items-center t-justify-center t-w-4 t-h-4 t-border-[1px] t-border-solid t-border-[--input-outline-color] t-rounded-full ">
          <input class="t-appearance-none t-w-2.5 t-h-2.5 t-aspect-square t-rounded-full checked:t-bg-[--input-checked-color]" type="radio" name="frequency" />
        </span>
        <div class="option-wrap t-flex t-items-center t-justify-between t-w-full">
          <div class="t-grid t-text-right t-leading-none t-pl-2">
            <span><strong>$61.19</strong></span>
            <small class="t-line-through t-text-[--text-strike-color]">$72.00</small>
          </div>
          <span>Subscribe & Save <strong class="t-text-[--primary-bg-color]">15% OFF</strong></span>
        </div>
      </label>
    </div>
  </div>
</div>

Related Examples

Tailwind CSS Radio Button Cards

Author:
Prashant

3 years ago

12.3k
Radio Buttons
Users can click anywhere on the input field to select the radio option

Author:
Prajwal Hallale

3 years ago

16.9k
Yes / No radio input with reset button

Author:
Kris Showen

2 years ago

10.4k
Material 3 Radio Buttons [Light]
Radio buttons that conform to Google's Material 3 design guidelines

Author:
Nick Girga

5 months ago

415
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

168
Image input with preview
Show you a preview of the selected image.

Author:
Prajwal Hallale

2 years ago

27.2k
Maintenance mode

Author:
Maxim

1 year ago

3.8k
Contact us form
Contact us form

Author:
Geoffrey Callaghan

1 year ago

5.9k
File upload input box

Author:
Mohit Prajapati

3 years ago

14.4k
File Upload
Image or file upload card

Author:
Khalid

1 year ago

3.4k
simple badge

Author:
Muhammad Imran

1 year ago

1.9k
Textarea

Author:
Ron Hicks

2 years ago

12.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components