Home
Rajesh Pandey
Divine Shree Ram Hero Section | Tailwind CSS Responsive UI for Devotional |Hero section |Hero

Divine Shree Ram Hero Section | Tailwind CSS Responsive UI for Devotional |Hero section |Hero

Explore a stunning and responsive Hero Section dedicated to Lord Ram, crafted with Tailwind CSS. Perfect for spiritual brands, Ramayana-inspired products, or devotional e-commerce platforms. Fully responsive, dark mode compatible, and animation-rich UI.

This tailwind example is contributed by Rajesh Pandey, on 16-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Avatar Hero Hover

Author Rajesh Pandey

289

Fork Fullscreen

<div class="relative z-10 text-center max-w-3xl space-y-6">
    <h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight font-serif text-yellow-900 dark:text-yellow-200 drop-shadow-xl animate-fade-in-up">
      जय श्री राम 🚩
    </h1>

<p class="text-xl md:text-2xl text-gray-700 dark:text-gray-300 font-medium animate-fade-in-up delay-200">
      Embark on a divine journey of dharma, courage, and compassion. Inspired by the life of Lord Ram — the embodiment of virtue.
    </p>

<div class="flex justify-center gap-4 pt-4 animate-fade-in-up delay-300">
      <a href="#learn-more" class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-3 px-6 rounded-lg shadow-lg transition duration-300">
        Learn About Ramayana
      </a>
      <a href="#mantra" class="bg-white dark:bg-gray-700 dark:text-yellow-300 border border-yellow-400 hover:bg-yellow-100 text-yellow-700 font-semibold py-3 px-6 rounded-lg shadow-lg transition duration-300">
        Chant the Mantra
      </a>
    </div>
  </div>

<style>
    @keyframes fade-in-up {
      0% {
        opacity: 0;
        transform: translateY(30px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }
    .animate-fade-in-up {
      animation: fade-in-up 1s ease forwards;
    }
    .delay-200 {
      animation-delay: 0.2s;
    }
    .delay-300 {
      animation-delay: 0.4s;
    }
  </style>
</div>

Related Examples

DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Author:
Ameth Galarcio

5 months ago

1.3k
Animated bento box.
A Coastal UI component (coastalui.com). This can be used as part of a bento box, great for showing connectivity between context, could be used beyond just showing tech stacks.

Author:
Coastal UI

4 months ago

848
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Author:
Ayyamperumal S

2 months ago

705
Hero section for website

Author:
Anonymous

10 months ago

1.3k
Startup page

Author:
ORGIN_DREAMS

2 months ago

277
Simple hero example

Author:
Task Master

2 years ago

10.6k
Responsive Hero Section
Key features of this hero section: 1. Responsive layout: Uses a column layout on mobile and switches to a row layout on medium screens and larger. 2. Left side: - Company name as a large heading - Brief description - "Learn More" button 3. Right side: - "Why Choose Us?" section with bullet points - Two call-to-action buttons: "Get Started" and "Contact Sales" 4. Styling: - Uses Tailwind's utility classes for responsive design, colors, spacing, and typography - Incorporates a shadow and rounded corners for the right-side content box - Includes hover effects on buttons for better interactivity This hero section will be fully responsive: - On mobile devices, it will stack vertically with the company info on top and the details below. - On larger screens, it will display in a two-column layout. The use of Tailwind CSS classes ensures that the design is consistent and easily adjustable. You can further customize the colors, fonts, and spacing to match your brand's specific design guidelines. Would you like me to explain any part of this code or make any adjustments?

Author:
zobaidul kaziex

1 year ago

2.1k
HERO

Author:
ABDO-SY

4 months ago

404
login_form
used for user to logging in

Author:
nii fanny

2 months ago

98
Very simple hero

Author:
Laurits

2 years ago

8.6k
Acode master
Acode master(=>good work for Acode master)

Author:
Code Master(Mfuranziza Dusabe Hamza)

2 months ago

164
Avatar
This Avatar component includes: 1. Responsive design using Tailwind CSS classes 2. Indigo-800 and Blue-900 color scheme 3. Dark mode support 4. User avatar with hover effect and online status indicator 5. User name and role 6. Follow button with hover effect 7. Follower count 8. Subtle animations and transitions 9. Accessibility considerations (proper contrast, focus states) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The avatar card has a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - The avatar image has a border color that changes in dark mode - The avatar has a scale effect on hover and a ring appears around it - The Follow button uses Indigo-800 with a Blue-900 hover state - The card has a shadow effect that changes color on hover - Dark mode is automatically applied based on system preferences - The entire card has a subtle transition effect for smooth color changes - Proper focus states are implemented for the button This design provides a clean, interactive avatar component while incorporating the requested color scheme and maintaining good usability across different devices and color modes.

Author:
nejaa badr

9 months ago

1.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components