DEV Community: saim

AdminWind: Free Admin Dashboard Template + 10 More TailwindCSS Templates You Need in 2025

saim — Tue, 23 Sep 2025 16:48:45 +0000

Building an admin dashboard from scratch? Skip weeks of development with AdminWind - a modern, responsive admin dashboard template that's completely FREE to download.

🎯 What is AdminWind?

AdminWind is a freemium admin dashboard template built with TailwindCSS 4 and AlpineJS. It offers both free and premium versions, making it perfect for developers who want to prototype quickly or build production-ready admin panels.

✨ Key Features

🎨 Modern Design: Clean, professional layouts
📱 Fully Responsive: Works on all devices
🌙 Dark Mode (Pro version)
⚡ AlpineJS Powered: Interactive without the bloat
🛠️ TailwindCSS 4: Latest utilities and performance
📊 Analytics Ready: Built for data visualization

🆓 Free Version vs 💎 Pro Version

Free Version (Available Now)

✅ 3 dashboard pages (overview, login, signup)
✅ Responsive design
✅ Basic components
✅ $0 - Completely Free

Pro Version ($10)

✅ 10+ dashboard pages
✅ Dark mode support
✅ Advanced forms & tables
✅ User authentication & management
✅ Analytics dashboard
✅ Only $10 - Incredible Value ## 🎨 10+ More Premium Templates You Need

While AdminWind is perfect for dashboards, here are 10+ more templates from Templateight to cover all your project needs:

1. MedTailor - Healthcare Template 🏥

💰 Price: Free, $10 Pro, $15 Next.js

🎯 Perfect for: Medical practices, clinics, telehealth

🔥 Features: Appointment booking, doctor profiles, 10+ pages

📱 Live Demo: MedTailor - Healthcare Template 🏥

2. TailFood - Restaurant Template 🍕

💰 Price: Free, $10 Pro, $15 Next.js (TypeScript)

🎯 Perfect for: Restaurants, food delivery, cafes

🔥 Features: Menu display, online ordering, reservation system

📱 Live Demo: TailFood - Restaurant Template 🍕

3. Nebula X - NextJS Landing Page 🚀

💰 Price: Free + Premium versions

🎯 Perfect for: Startups, SaaS, Product launches

🔥 Features: Hero sections, pricing tables, testimonials

📱 Live Demo: Nebula X - Landing Page 🚀

4. TailShop - E-commerce Template 🛒

💰 Price: $10

🎯 Perfect for: Online stores, grocery delivery, marketplaces

🔥 Features: Product catalogs, shopping cart, checkout

📱 Live Demo: TailShop - E-commerce Template 🛒

5. TailGame - Gaming Template 🎮

💰 Price: Premium

🎯 Perfect for: Gaming clans, esports, streamers

🔥 Features: Dark theme, team profiles, tournaments

📱 Live Demo: TailGame - Gaming Template 🎮

6. AutoElite - Car Dealership 🚗

💰 Price: $10

🎯 Perfect for: Auto dealers, car rentals, automotive

🔥 Features: Vehicle listings, test drive booking

📱 Live Demo: AutoElite - Car Dealership 🚗

7. SystemLaunch - SaaS Landing 💻

💰 Price: Affordable

🎯 Perfect for: SaaS products, tech startups

🔥 Features: Feature showcases, pricing tiers

📱 Live Demo: SystemLaunch - SaaS Landing 💻

8. LaunchFlow - Coming Soon Page ⏰

💰 Price: FREE

🎯 Perfect for: Product launches, announcements

🔥 Features: Countdown timer, email capture

📱 Live Demo: LaunchFlow - Coming Soon ⏰

9. Components Library - 100+ UI Components 🧩

💰 Price: FREE

🎯 Perfect for: Any project

🔥 Features: 100+ components across 50+ categories

📱 Live Demo: Components Library 🧩

10. Custom Templates - Build Your Own 🎨

💰 Price: Contact for quote

🎯 Perfect for: Unique requirements

🔥 Features: Custom design, development support

📱 Live Demo: Custom Templates 🎨

4 Beautiful Article Components for Your Next Blog - TailwindCSS, React & Vue Ready

saim — Thu, 11 Sep 2025 16:38:43 +0000

Building a blog or news site? You need beautiful, responsive article components that work across all devices. Today I'm sharing 4 stunning article components from Templateight - all free and ready to copy-paste into your React, Vue, or HTML projects.

🎯 What You'll Get

All components come with:

✅ TailwindCSS styling (no custom CSS needed)
✅ React, Vue & HTML versions (choose your framework)
✅ Fully responsive design
✅ Copy-paste ready code
✅ Production tested

Features:

Category badges
Read time indicators
Author information
Hover animations

🔗 Links & Resources
🌐 Live Demo: templateight.com/components/articles
📚 All Components: templateight.com/components
🎨 Templates: templateight.com/themes
📖 TailwindCSS Docs: tailwindcss.com

New Accordion UI Components for TailwindCSS (HTML, Vue, React)

saim — Tue, 19 Aug 2025 13:18:32 +0000

Hey folks 👋

I just built some beautiful, responsive accordion components using TailwindCSS and AlpineJS (with React & Vue support too 🚀).

Perfect for FAQs, collapsible content, and expandable sections — and they’re super easy to drop into any project.

👉 Live Demo + Source: Accordion Components

🔥 Components Included

1. Basic Accordion

A simple, clean accordion perfect for FAQs or basic content organization.

Supports HTML, Vue, and JSX.

2. Plus/Minus Accordion

Accordion with plus/minus icons that smoothly animate between states.

3. Gradient Card Accordion

Colorful gradient cards with icons, shadow animations, and smooth slide effects.

🚀 How to Use

Requirements

TailwindCSS v4.0+ installed → Install Guide
AlpineJS (for HTML version)
Heroicons (optional for icons)

React:

npm install @heroicons/react

Vue:

npm install @heroicons/vue

🔗 See Also

🍽️ TailFood – Modern Restaurant & Food Ordering Template
🌌 Nebulax – Modern Tailwind CSS Landing Page
🏥 MedTailor – Healthcare Tailwind Template
🎮 TailGame – Premium Gaming & Esports Template
🚗 AutoElite – Premium Car Dealership Template
📊 AdminWind – Freemium Admin Dashboard Template

How to Create iOS 26 Liquid Glass Buttons with Tailwind CSS

saim — Mon, 04 Aug 2025 16:46:00 +0000

How to Create Stunning iOS 26-Inspired Liquid Glass Buttons with Tailwind CSS 4

The world of user interface design is constantly evolving, and Apple's iOS 26 has introduced one of the most captivating design trends we've seen in years: Liquid Glass Buttons. These ethereal, translucent elements seem to float on your screen like droplets of liquid mercury, creating an almost magical user experience that feels both futuristic and surprisingly intuitive.

If you've ever wondered how to recreate these mesmerizing buttons for your web projects, you're in for a treat. Today, we're diving deep into the art of crafting iOS 26-inspired liquid glass buttons using the latest Tailwind CSS 4 framework.

What Makes Liquid Glass Buttons So Special?

Liquid glass buttons aren't just another design trend – they represent a fundamental shift in how we think about digital interfaces. These buttons combine several visual techniques that our brains find naturally appealing:

Glassmorphism meets fluid dynamics

The translucent nature creates depth without overwhelming content beneath them.

Micro-interactions that feel alive

Gentle animations mimic liquid physics for satisfying user feedback.

Visual harmony

Works beautifully with both light and dark themes.

Understanding the Magic Behind These Buttons

These buttons look amazing because they use a few clever CSS tricks:

Blurred backgrounds: The backdrop-blur-lg makes everything behind the button look softly blurred, like frosted glass.
See-through colors: Using rgba(255,255,255,0.15) creates that translucent look where you can see through the button.
Subtle borders: Light borders like border-white/15 give the buttons that glassy edge.
Smooth animations: Hover effects like hover:-translate-y-0.5 make buttons gently lift when you mouse over them.

Easy Button Styles to Copy

Let's look at each button style and see exactly how to use them in your projects.

1. Primary Button (Main Action)

This is your main button - use it for important actions like "Sign Up" or "Buy Now". It has the strongest glow and stands out the most.

<button class="px-5 py-2.5 rounded-lg text-white font-medium border border-white/15 backdrop-blur-lg shadow-lg bg-[rgba(255,255,255,0.15)] hover:-translate-y-0.5 active:scale-95 transition-all duration-300">
    Primary
</button>

2. Secondary Button (Less Important Actions)

This button is more subtle - perfect for actions like "Learn More" or "Cancel". It has less opacity so it doesn't compete with your main button.

<button class="px-5 py-2.5 rounded-lg text-white/90 font-medium border border-white/10 backdrop-blur-lg shadow-md bg-[rgba(255,255,255,0.08)] hover:-translate-y-0.5 active:scale-95 transition-all duration-300">
    Secondary
</button>

3. Tertiary Button (Very Subtle)

The most subtle button with barely any background. Great for links or less important actions that still need the liquid glass look.

<button class="px-4 py-2 rounded-lg text-white/80 text-sm font-medium border border-white/5 backdrop-blur-lg shadow-sm bg-[rgba(255,255,255,0.04)] hover:-translate-y-0.5 active:scale-95 transition-all duration-300">
    Tertiary
</button>

Special Button Shapes

Rounded Pill Button

Perfect for friendly actions like "Get Started". The rounded shape feels more welcoming and modern.

<button class="group flex items-center justify-center gap-2 px-5 py-2.5 rounded-full text-sm font-medium text-white/90 border border-white/10 backdrop-blur-lg shadow-md transition-all duration-300 ease-out bg-[rgba(255,255,255,0.08)] hover:-translate-y-0.5 active:scale-95">
    Get Started
</button>

Floating Action Button

A circular button that really stands out. Great for main actions like "Add" or "Create". This one has a blue tint to make it even more noticeable.

<button class="group flex items-center justify-center w-12 h-12 rounded-full text-white border border-blue-400/20 backdrop-blur-lg shadow-lg transition-all duration-300 ease-out bg-[rgba(59,130,246,0.25)] hover:-translate-y-0.5 active:scale-95">
    <svg class="w-5 h-5 transition group-hover:scale-110 group-hover:rotate-45" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
    </svg>
</button>

Small Icon Button

Small and compact, perfect for toolbars or when you need to save space. The icon grows slightly when you hover over it.

<button class="group flex items-center justify-center w-10 h-10 rounded-lg text-white/90 border border-white/10 backdrop-blur-lg shadow-md transition-all duration-300 ease-out bg-[rgba(255,255,255,0.08)] hover:-translate-y-0.5 active:scale-95">
    <svg class="w-4 h-4 transition group-hover:scale-110" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
    </svg>
</button>

How to Use These Buttons

1. Set Up Tailwind CSS 4

Make sure you have Tailwind CSS 4 installed. You'll need backdrop filter utilities enabled.

2. Copy and Paste

Simply copy any button code above and paste it into your HTML. They'll work right away!

3. Customize Your Way

Change text, adjust colors, or modify sizes to match your design. Examples are starting points.

Pro Tips for Perfect Results

Dark backgrounds work best: These buttons really shine when placed over dark or gradient backgrounds.
Keep it simple: Don't overuse - a few liquid glass buttons per page look premium.
Test on mobile: Always test blur effects on actual devices for smooth performance.
Ensure readability: Make sure button text has enough contrast against backgrounds.

Start Building Your Liquid Glass Buttons Today

Now you have everything you need to create stunning liquid glass buttons for your projects. Copy the code examples, experiment with different styles, and most importantly – have fun with it!

These buttons work great for modern websites, apps, and any project where you want to add that premium iOS 26 feel. Start with the basic primary button and gradually add more variants as you get comfortable with the technique.

MedTailor – Free Medical & Healthcare Tailwind CSS Template

saim — Mon, 23 Jun 2025 19:06:33 +0000

MedTailor – Free Medical & Healthcare Tailwind CSS Template

I'm excited to share MedTailor - a professionally designed healthcare template built with TailwindCSS and AlpineJS! Perfect for medical practices, clinics, and healthcare providers looking for a modern web presence.

✨ Key Features

Healthcare-Specific Design tailored for medical practices with components and layouts optimized for healthcare providers
10+ Pre-built Pages including Home, About, Services, Doctors, Appointment Booking, and more
Fully Responsive design that works perfectly on all devices and screen sizes
Interactive Elements powered by AlpineJS for enhanced user experience
Clean, Professional Design focused on healthcare aesthetics and usability

🎁 Free & Pro Versions

MedTailor comes in both free and pro versions:

Free Version: Basic landing page with responsive design and contact form
Pro Version ($10): Complete healthcare template with TailwindCSS 4 and AlpineJS, featuring 10+ responsive pages, appointment booking system, doctor profiles, and more

🔍 Live Preview

Check out the live preview to see MedTailor in action.

🚀 Perfect For

Medical practices and clinics
Healthcare professionals
Hospitals and medical centers
Health-related service providers
Telemedicine services

💻 Technologies Used

TailwindCSS 4
AlpineJS 3.x
Responsive design principles
Accessibility-focused components

I built this template to help healthcare providers establish a professional online presence without spending thousands on custom web development.

What do you think? Would you be interested in using this template for your healthcare-related projects?

Download | Live Preview

Extending Django Models: A Comprehensive Guide

saim — Tue, 06 Aug 2024 11:52:11 +0000

Django’s ORM (Object-Relational Mapping) provides a powerful and flexible way to interact with your database using Python objects. One of its most useful features is model inheritance, which allows you to extend and reuse models in a clean and efficient manner. In this blog post, we'll explore the different ways to extend Django models and provide practical examples to help you understand how to leverage this feature in your own projects.

Understanding Model Inheritance

Django supports several types of model inheritance:

Abstract Base Classes
Multi-Table Inheritance
Proxy Models Each type has its own use case and advantages. Let’s dive into each one.

Abstract Base Classes

Abstract base classes allow you to define common fields and methods that will be shared among multiple models. These classes themselves are not represented in the database; instead, they provide a base for other models to inherit from.

Let’s say you want to create a set of models that share common contact information. You can define an abstract base class to hold this information.

from django.db import models

class ContactInfo(models.Model):
    phone_number = models.CharField(max_length=15)
    email = models.EmailField()

    class Meta:
        abstract = True

class Person(ContactInfo):
    first_name = models.CharField(max_length=100)
    last_name = models.CharField(max_length=100)

class Company(ContactInfo):
    company_name = models.CharField(max_length=255)
    address = models.CharField(max_length=255)

ContactInfo is an abstract base class with fields phone_number and email. Both Person and Company inherit these fields, along with their own specific fields.

Multi-Table Inheritance

Multi-table inheritance allows you to create a parent model that is represented in its own database table. Child models inherit fields from the parent model and have their own additional fields. Each model has its own table in the database, which allows you to query and manipulate the data independently.

Suppose you have a basic Person model and want to add additional fields specific to employees.

from django.db import models

class Person(models.Model):
    first_name = models.CharField(max_length=100)
    last_name = models.CharField(max_length=100)

class Employee(Person):
    employee_id = models.CharField(max_length=100)
    department = models.CharField(max_length=100)

In this case, Employee extends Person with additional fields employee_id and department. Both models have their own database tables, and the Employee table includes a foreign key to the Person table.

Proxy Models

Proxy models allow you to modify the behavior of an existing model without changing its schema. You can use proxy models to add custom methods or change the default model manager, without affecting the underlying table.

Assume you have a Person model and want to create a proxy model to provide additional functionality, such as a custom method.

from django.db import models

class Person(models.Model):
    first_name = models.CharField(max_length=100)
    last_name = models.CharField(max_length=100)

    def full_name(self):
        return f"{self.first_name} {self.last_name}"

class PersonProxy(Person):
    class Meta:
        proxy = True

    def greet(self):
        return f"Hello, my name is {self.full_name()}"

PersonProxy is a proxy model that adds a greet method to the Person model. The database schema for Person remains unchanged.

Practical Considerations

Abstract Base Classes are useful when you have fields and methods that you want to reuse across multiple models, without creating unnecessary database tables.

Multi-Table Inheritance is ideal when you need to extend the functionality of an existing model and maintain a clear relationship between the parent and child models.

Proxy Models are best used when you want to add new behaviors or custom methods to a model without altering its database schema.

Conclusion

Extending Django models is a powerful way to create reusable and maintainable code. Whether you’re sharing common fields with abstract base classes, adding new fields with multi-table inheritance, or customizing behavior with proxy models, Django provides the tools you need to build robust and scalable applications.

Feel free to experiment with these inheritance strategies to see how they fit into your own projects. Understanding and utilizing model inheritance can greatly enhance your development workflow and lead to cleaner, more organized code.

How to Solve 'Class NumberFormatter not found' in Laravel

saim — Mon, 05 Aug 2024 17:36:19 +0000

The error Class 'NumberFormatter' not found in Laravel typically occurs when the intl extension is not installed or enabled in your PHP environment. The NumberFormatter class is part of the intl (Internationalization) extension.

Check PHP Extension

Make sure that the intl extension is installed and enabled.
For Ubuntu/Debian:

sudo apt-get install php-intl

For CentOS/RHEL:

sudo yum install php-intl

For Windows:
Open your php.ini file.Uncomment the line ;extension=intl by removing the semicolon (;).

Restart Your Web Server

After installing or enabling the intl extension, restart your web server to apply the changes.
For Apache:

sudo service apache2 restart

For Nginx:

sudo service nginx restart
sudo service php-fpm restart

Check Installation:

You can verify if the extension is enabled by running:

php -m | grep intl

If intl is listed, then the extension is enabled.

Composer Update:

Make sure your Composer dependencies are up to date.

composer update

After performing these steps, the NumberFormatter class should be available in your Laravel project. If the problem persists, make sure your PHP configuration is correctly pointing to the right php.ini file, and check for any typos or errors in your configuration files.

How to Use Star Rating in Tailwind CSS

saim — Wed, 24 Jul 2024 10:29:49 +0000

Discover how to implement star ratings effortlessly using Tailwind CSS! This quick guide walks you through the steps to beautifully integrate star icons into your web projects. Elevate user interaction and design aesthetics with this straightforward tutorial.

Tailwind CSS Colors Gradient Generator

To use star ratings with Tailwind CSS, you can create a custom component.

<div class="flex items-center">
  <span class="text-yellow-400">★</span>
  <span class="text-yellow-400">★</span>
  <span class="text-yellow-400">★</span>
  <span class="text-gray-300">★</span>
  <span class="text-gray-300">★</span>
</div>

Simple star rating using Heroicons with TailwindCSS.

<ul class="flex items-center gap-x-1">
    <li>
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-yellow-300" fill="none" viewBox="0 0 24 24"
            stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
        </svg>
    </li>
    <li>
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-yellow-300" fill="none" viewBox="0 0 24 24"
            stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
        </svg>
    </li>
    <li>
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-yellow-300" fill="none" viewBox="0 0 24 24"
            stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
        </svg>
    </li>
    <li>
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-yellow-300" fill="none" viewBox="0 0 24 24"
            stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
        </svg>
    </li>
    <li>
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-yellow-300" fill="none" viewBox="0 0 24 24"
            stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
        </svg>
    </li>
</ul>

Simple tailwind star rating with awesome Icon.

<ul class="flex items-center gap-x-1">
  <li>
    <i class="text-yellow-300 far fa-star"></i>
  </li>
  <li>
    <i class="text-yellow-300 far fa-star"></i>
  </li>
  <li>
    <i class="text-yellow-300 far fa-star"></i>
  </li>
  <li>
    <i class="text-yellow-300 far fa-star"></i>
  </li>
  <li>
    <i class="text-yellow-300 far fa-star"></i>
  </li>
</ul>

Create a star rating in Tailwind CSS using HTML symbol codes.

Tailwind CSS Investment Portfolio Tracker Free & Paid Template

<div class="flex items-center">
  <!-- 1st Star -->
  <input type="radio" id="star1" name="rating" class="hidden" />
  <label for="star1" class="cursor-pointer text-2xl text-yellow-500">★</label>

  <!-- 2nd Star -->
  <input type="radio" id="star2" name="rating" class="hidden" />
  <label for="star2" class="cursor-pointer text-2xl text-yellow-500">★</label>

  <!-- 3rd Star -->
  <input type="radio" id="star3" name="rating" class="hidden" />
  <label for="star3" class="cursor-pointer text-2xl text-yellow-500">★</label>

  <!-- 4th Star -->
  <input type="radio" id="star4" name="rating" class="hidden" />
  <label for="star4" class="cursor-pointer text-2xl text-yellow-500">★</label>

  <!-- 5th Star -->
  <input type="radio" id="star5" name="rating" class="hidden" />
  <label for="star5" class="cursor-pointer text-2xl text-yellow-500">★</label>
</div>

Tailwind star rating with hover effect.

<ul class="flex items-center gap-x-1">
  <li>
    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-yellow-300 fill-current hover:text-yellow-400"
      fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
    </svg>
  </li>
  <li>
    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-yellow-300 fill-current hover:text-yellow-400"
      fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
    </svg>
  </li>
  <li>
    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-yellow-300 hover:text-yellow-400" fill="none"
      viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
    </svg>
  </li>
</ul>

Create Users star reviews card.

<div class="max-w-sm px-4 py-4 rounded-lg shadow">
    <div class="px-4 py-4 mb-1 tracking-wide">
        <h2 class="mt-1 font-semibold text-gray-800">106 Users reviews</h2>
        <div class="px-8 pb-3 -mx-8 border-b">
            <div class="flex items-center mt-1">
                <div class="w-1/5 tracking-tighter text-gray-500">
                    <span>5 star</span>
                </div>
                <div class="w-3/5">
                    <div class="w-full h-2 bg-gray-300 rounded-lg">
                        <div class="w-7/12 h-2 bg-yellow-600 rounded-lg"></div>
                    </div>
                </div>
                <div class="w-1/5 pl-3 text-gray-700">
                    <span class="text-sm">51%</span>
                </div>
            </div>
            <div class="flex items-center mt-1">
                <div class="w-1/5 tracking-tighter text-gray-500">
                    <span>4 star</span>
                </div>
                <div class="w-3/5">
                    <div class="w-full h-2 bg-gray-300 rounded-lg">
                        <div class="w-1/5 h-2 bg-yellow-600 rounded-lg"></div>
                    </div>
                </div>
                <div class="w-1/5 pl-3 text-gray-700">
                    <span class="text-sm">17%</span>
                </div>
            </div>
            <div class="flex items-center mt-1">
                <div class="w-1/5 tracking-tighter text-gray-500">
                    <span>3 star</span>
                </div>
                <div class="w-3/5">
                    <div class="w-full h-2 bg-gray-300 rounded-lg">
                        <div class="w-3/12 h-2 bg-yellow-600 rounded-lg"></div>
                    </div>
                </div>
                <div class="w-1/5 pl-3 text-gray-700">
                    <span class="text-sm">19%</span>
                </div>
            </div>
            <div class="flex items-center mt-1">
                <div class="w-1/5 tracking-tighter text-gray-500">
                    <span>2 star</span>
                </div>
                <div class="w-3/5">
                    <div class="w-full h-2 bg-gray-300 rounded-lg">
                        <div class="w-1/5 h-2 bg-yellow-600 rounded-lg"></div>
                    </div>
                </div>
                <div class="w-1/5 pl-3 text-gray-700">
                    <span class="text-sm">8%</span>
                </div>
            </div>
            <div class="flex items-center mt-1">
                <div class="w-1/5 tracking-tighter text-gray-500">
                    <span>1 star</span>
                </div>
                <div class="w-3/5">
                    <div class="w-full h-2 bg-gray-300 rounded-lg">
                        <div class="w-2/12 h-2 bg-yellow-600 rounded-lg"></div>
                    </div>
                </div>
                <div class="w-1/5 pl-3 text-gray-700">
                    <span class="text-sm">5%</span>
                </div>
            </div>
        </div>
    </div>
    <div class="w-full px-4">
        <h3 class="font-medium tracking-tight">Review this item</h3>
        <ul class="flex items-center gap-x-1">
            <li>
                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-yellow-300" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
                </svg>
            </li>
            <li>
                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-yellow-300" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
                </svg>
            </li>
            <li>
                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-yellow-300" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
                </svg>
            </li>
            <li>
                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-yellow-300" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
                </svg>
            </li>
            <li>
                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-yellow-300" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
                </svg>
            </li>
        </ul>
        <p class="py-1 text-sm text-gray-700">Plz Give your star rating 1 to 5.</p>
    </div>
</div>

How to Create a Loading Button in Tailwind CSS

saim — Wed, 17 Jul 2024 16:28:33 +0000

Providing visual feedback is essential for user experience. In this tutorial, we'll show you how to make a loading button using Tailwind CSS. It's simple and perfect for any web project. Let's get started!

This creates a blue button with a spinning loading icon and** Loading…** text. The button is disabled while loading.

<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline flex items-center" disabled>
  <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
  </svg>
  Loading...
</button>

Loading Button Tailwind CSS with AlpineJS

This button uses Alpine.js to manage its state and appearance. When clicked, it shows a loading spinner and changes the text to Loading… for 2 seconds.

<button
  x-data="{ loading: false }"
  x-on:click="loading = true; setTimeout(() => loading = false, 2000)"
  :class="{ 'opacity-50 cursor-not-allowed': loading }"
  :disabled="loading"
  class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline flex items-center"
>
  <svg
    x-show="loading"
    class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
  >
    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
  </svg>
  <span x-text="loading ? 'Loading...' : 'Submit'"></span>
</button>

Tailwind CSS Investment Portfolio Tracker Free & Paid Template

saim — Mon, 15 Jul 2024 16:51:58 +0000

Portfolio Tracker with Stock Market Free Version

This HTML structure utilizes Tailwind CSS classes to craft a responsive and visually appealing layout for the Investment Portfolio Tracker. Here's an overview of its main components:

Header: Provides a simple title for the page.

Portfolio Summary: Presents essential metrics such as total value, gain/loss, and the number of stocks.

Stock List: Displays detailed information about each stock in the portfolio within a structured table.

Market Updates: Offers a feed of recent market news and events.
The design employs background colors, rounded corners, and shadows strategically to enhance visual separation between sections. It adapts seamlessly across different screen sizes for optimal user experience.

Download

Portfolio Tracker with Stock Market Paid Version

This upgraded version boasts several new features and improvements:
Header: Quick action buttons for adding stocks and generating reports.

Expanded Portfolio Summary: Includes additional metrics for a comprehensive view.

Performance Chart: Tracks portfolio value over time for insightful analysis.

Quick Actions: Streamlines common portfolio management tasks.

Enhanced Stock List: Offers more details and action buttons per stock.

Sector Allocation Chart: Visualizes portfolio diversification effectively.

Watchlist: Monitors potential investments with ease.

Improved Market Updates: Provides timely news with timestamps.

Using Chart.js, the UI features interactive charts for performance and sector allocation, ensuring a dynamic user experience across different screen sizes. This design enhances portfolio management by providing extensive tools for analysis and decision-making.
Download

Creating a Responsive Profile Settings UI with Tailwind CSS

saim — Fri, 12 Jul 2024 15:47:00 +0000

In this section, we will create a user profile settings design using Tailwind CSS. This process will involve designing a user interface that is visually appealing and user-friendly, leveraging the utility-first approach of Tailwind CSS to style various components effectively.

Create a minimalist user profile setup with Username, Email, and Password using Tailwind CSS.

<div class="bg-gray-100 h-screen flex items-center justify-center">
    <div class="bg-white p-8 rounded shadow-md w-full max-w-md">
        <h1 class="text-2xl font-semibold mb-4">Profile Settings</h1>

        <form>
            <div class="mb-4">
                <label for="username" class="block text-sm font-medium text-gray-600">Username</label>
                <input type="text" id="username" name="username"
                    class="mt-1 p-2 border border-gray-300 rounded-md w-full focus:outline-none focus:ring focus:border-blue-300" />
            </div>

            <div class="mb-4">
                <label for="email" class="block text-sm font-medium text-gray-600">Email</label>
                <input type="email" id="email" name="email"
                    class="mt-1 p-2 border border-gray-300 rounded-md w-full focus:outline-none focus:ring focus:border-blue-300" />
            </div>

            <div class="mb-6">
                <label for="password" class="block text-sm font-medium text-gray-600">Password</label>
                <input type="password" id="password" name="password"
                    class="mt-1 p-2 border border-gray-300 rounded-md w-full focus:outline-none focus:ring focus:border-blue-300" />
            </div>

            <button type="submit"
                class="w-full bg-blue-500 text-white p-2 rounded-md hover:bg-blue-600 focus:outline-none focus:ring focus:border-blue-300">
                Save Changes
            </button>
        </form>
    </div>
</div>

Tailwind CSS Investment Portfolio Tracker Free & Paid Template
Designing user profile enhancements with Tailwind CSS: First Name, Last Name, Email, New Password, Profile Picture Update, and Account Deletion Button.

<div class="bg-gray-100 min-h-screen flex items-center justify-center">
    <div class="max-w-md bg-white p-8 rounded shadow-md">
        <!-- Avatar Section -->
        <div class="flex items-center justify-center mb-6">
            <div class="w-20 h-20 mr-4 overflow-hidden rounded-full">
                <img src="https://picsum.photos/200/300" alt="Avatar" class="w-full h-full object-cover" />
            </div>
            <div>
                <label for="avatar" class="cursor-pointer text-blue-500 hover:underline">Change Profile Picture</label>
                <input type="file" id="avatar" class="hidden" />
            </div>
        </div>

        <!-- Name Section -->
        <div class="grid grid-cols-2 gap-4 mb-6">
            <div>
                <label for="firstName" class="block text-gray-700 text-sm font-bold mb-2">First Name</label>
                <input type="text" id="firstName"
                    class="w-full px-4 py-2 border rounded focus:outline-none focus:border-blue-500" />
            </div>
            <div>
                <label for="lastName" class="block text-gray-700 text-sm font-bold mb-2">Last Name</label>
                <input type="text" id="lastName"
                    class="w-full px-4 py-2 border rounded focus:outline-none focus:border-blue-500" />
            </div>
        </div>

        <!-- Email Section -->
        <div class="mb-6">
            <label for="email" class="block text-gray-700 text-sm font-bold mb-2">Email</label>
            <input type="email" id="email"
                class="w-full px-4 py-2 border rounded focus:outline-none focus:border-blue-500" />
        </div>

        <!-- Password Section -->
        <div class="mb-6">
            <label for="password" class="block text-gray-700 text-sm font-bold mb-2">New Password</label>
            <input type="password" id="password"
                class="w-full px-4 py-2 border rounded focus:outline-none focus:border-blue-500" />
        </div>

        <!-- Buttons -->
        <div class="flex justify-between">
            <button
                class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 focus:outline-none focus:shadow-outline-blue"
                type="button">
                Save Changes
            </button>
            <button
                class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600 focus:outline-none focus:shadow-outline-red"
                type="button">
                Delete Account
            </button>
        </div>
    </div>
</div>

Building a Responsive Profile Settings Page with Sidebar Using Tailwind CSS.

<div class="flex min-h-screen bg-gray-100">
    <!-- Sidebar -->
    <aside class="hidden w-1/4 bg-gray-800 text-white md:block">
        <div class="p-4">
            <h2 class="text-2xl font-semibold">Settings</h2>
            <ul class="mt-4 space-y-2">
                <li><a href="#" class="block px-4 py-2 text-sm hover:bg-gray-700">Profile</a></li>
                <li><a href="#" class="block px-4 py-2 text-sm hover:bg-gray-700">Security</a></li>
                <li><a href="#" class="block px-4 py-2 text-sm hover:bg-gray-700">Notifications</a></li>
            </ul>
        </div>
    </aside>
    <!-- Content -->
    <div class="flex-1 p-8">
        <!-- Mobile Menu Toggle Button (hidden on larger screens) -->
        <div class="flex justify-end md:hidden">
            <button id="menuToggle" class="text-gray-700 hover:text-gray-900 focus:outline-none">
                <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                    xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7">
                    </path>
                </svg>
            </button>
        </div>
        <!-- Profile Settings -->
        <div class="max-w-md rounded bg-white p-8 shadow-md">
            <!-- Avatar Section -->
            <div class="mb-6 flex items-center justify-center">
                <div class="mr-4 h-24 w-24 overflow-hidden rounded-full">
                    <img src="https://picsum.photos/200/300" alt="Avatar" class="h-full w-full object-cover" />
                </div>
                <div>
                    <label for="avatar" class="cursor-pointer text-blue-500 hover:underline">Change Picture</label>
                    <input type="file" id="avatar" class="hidden" />
                </div>
            </div>
            <!-- Form Section -->
            <form>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label for="firstName" class="mb-2 block text-sm font-bold text-gray-700">First Name</label>
                        <input type="text" id="firstName"
                            class="w-full rounded border px-4 py-2 focus:border-blue-500 focus:outline-none" />
                    </div>
                    <div>
                        <label for="lastName" class="mb-2 block text-sm font-bold text-gray-700">Last Name</label>
                        <input type="text" id="lastName"
                            class="w-full rounded border px-4 py-2 focus:border-blue-500 focus:outline-none" />
                    </div>
                </div>
                <div class="mb-6">
                    <label for="email" class="mb-2 block text-sm font-bold text-gray-700">Email</label>
                    <input type="email" id="email"
                        class="w-full rounded border px-4 py-2 focus:border-blue-500 focus:outline-none" />
                </div>
                <div class="mb-6">
                    <label for="password" class="mb-2 block text-sm font-bold text-gray-700">New Password</label>
                    <input type="password" id="password"
                        class="w-full rounded border px-4 py-2 focus:border-blue-500 focus:outline-none" />
                </div>
                <!-- Buttons -->
                <div class="flex justify-end">
                    <button
                        class="focus:shadow-outline-blue rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600 focus:outline-none"
                        type="button">Save Changes</button>
                </div>
            </form>
        </div>
    </div>
</div>

How to Use Text Underline Offset in Tailwind CSS

saim — Wed, 10 Jul 2024 15:32:00 +0000

To use text underline offset in Tailwind CSS, you can use the underline-offset-{amount} utility class. Here's how to apply it:

Add the underline class to enable underlining.
Use underline-offset-{amount} to set the offset. The available amounts are:

underline-offset-auto

underline-offset-0
underline-offset-1
underline-offset-2
underline-offset-4
underline-offset-8

<p class="underline underline-offset-4">
  This text has an underline with an offset of 4 pixels.
</p>

You can also combine this with other text decoration utilities like decoration-{color} to change the underline color.

<p class="underline underline-offset-2 decoration-blue-500">
  This text has a blue underline with an offset of 2 pixels.
</p>

You can can use in Article Headings with Decorative Underline eg.

<article class="max-w-2xl mx-auto">
    <h1 class="text-3xl font-bold mb-4 underline underline-offset-8 decoration-4 decoration-blue-500">
        The Future of Web Development
    </h1>

    <p class="mb-4">
        Web development is constantly evolving...
    </p>

    <h2 class="text-2xl font-semibold my-3 underline underline-offset-4 decoration-2 decoration-green-400">
        1. Rise of AI-powered Tools
    </h2>

    <p class="mb-4">
        Artificial Intelligence is making its way into web development...
    </p>

    <!-- More content... -->
</article>

View Demo