Rating Form with stars and message

tailwindcss

This tailwind example is contributed by Prashant Saini, on 07-Jun-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example is Vote

Rating

Author Prashant Saini

Tailwind v3.4 859 4

Fork Fullscreen

<h2 class="text-3xl font-bold text-white text-center font-serif">Write a Review</h2>
            <div class="flex justify-center gap-2 text-3xl">
                <div class="flex flex-row-reverse justify-end items-center gap-2">

</div>
            </div>
            <div class="text-center text-gray-400 text-xl mb-4">
                <textarea id="review" name="review" rows="4" required class="w-full p-4 text-xl text-white font-serif placeholder-gray-400 bg-gray-700 rounded-lg border border-gray-600 focus:ring-2 focus:ring-blue-500 focus:outline-none resize-none" placeholder="Write your thoughts..."></textarea>
            </div>
            <div class="text-center">
                <button type="submit" class="font-serif w-full bg-gradient-to-r from-indigo-500 via-purple-600 to-pink-500 text-white font-semibold py-3 px-6 rounded-lg shadow-lg hover:from-indigo-600 hover:to-pink-600 transition-all duration-300">
                    Submit Review
                </button>
            </div>
        </form>
    </div>

Related Examples

Configurable 3-Tier Responsive Pricing Table
A modern, responsive pricing table component inspired by SaaS layouts, built with HTML and Tailwind CSS. Features three distinct pricing tiers displayed in cards, stacking vertically on smaller screens and transitioning to a 3-column grid on large screens (lg breakpoint). Includes interactive top controls for selecting the number of users and toggling between monthly/yearly billing cycles. Each card uses placeholder content for icons, titles, descriptions, features (with checkmarks/info icons), and distinct call-to-action buttons, making it easily adaptable. Styled with subtle background colors and clear typography for excellent readability.

Hamza Atig

1 year ago

1.6k
rating card

Anum Shahana

1 year ago

2.5k
Modern Testimonial
A simple and easy to use component for reviews and testimonials.

Coastal UI

1 year ago

1.5k
User review form
Write a review form star rating form

Quentin Rivers

1 year ago

3.4k
Heart Shaped Rating Section

Gopi Yadav

3 years ago

13.5k
Product rating section
display star rating stats with user avatars

Erik Hyatt

3 years ago

11.9k
Rating with text
you also want to show a text near the stars you can use this example as a reference. @zobaidulkazi

zobaidul kaziex

2 years ago

2.2k
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Hasan AlDoy (McDoy)

4 months ago

441
Card
travel place card hover effect card

nahid hasan

1 year ago

2.4k
Show total ratings

Piet Vriend

3 years ago

10.7k
Responsive Pricing Table with Toggle Switch — Built with Tailwind Flex
A clean, responsive Pricing Table UI built entirely with Tailwind CSS and Flexbox. Includes a smooth monthly/yearly toggle switch, fully mobile-friendly layout, and modern design — perfect for SaaS, startups, freelancers, or any web project. 📱 100% Responsive 🎯 Easily customizable 💡 Ideal for client or personal projects

Muhammad Umair Arshad

1 year ago

1.4k
Super input radio card
card input radio simple input card input design awesome card design rounded black shadow blue border gray icon card radio option HTML CSS select JavaScript dropdown

ROHIT RAJPUT

1 year ago

2.7k