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 v3.4. It is responsive.

Avatar Hero Hover

Author Rajesh Pandey

Tailwind v3.4 1.7k 4

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

Ameth Galarcio

1 year ago

2.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.

Coastal UI

1 year ago

2.1k
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)

Ayyamperumal S

1 year ago

2.9k
Intelligent AI tools built to help.
Unlock smarter workflows with AI tools designed to boost productivity, simplify tasks and help you do more with less effort.

Alif Bima Pradana

8 months ago

615
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/

Achraf Testq

5 months ago

619
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)

5 months ago

475
Visernic Profile

MD Mostafa Niloy

11 months ago

1.2k
super cube
complex landing page for super cube created by salvator

Baraka Salvator

1 year ago

1.5k
Clean hero section

OmKar Mehta

2 years ago

3.9k
About Us
This The About Us Component with the tailwind class and some animation by tailwind and best about us page you can modify it and content is for now only clinic but you can ad your content

Sahil Sasapara

2 years ago

5.7k
Portfolio Hero Section 5

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

3k
Animated Hero Slider, different images for mobile
A hero with 2 images alternating each other every 7 seconds, zoom on scroll

Gianluca Secondo

1 year ago

2.1k