<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tamil Nadu Tourism - Experience the Divine South</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.1/flowbite.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-amber-50">
<!-- Navigation -->
<nav class="bg-orange-800 fixed w-full z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<div class="flex items-center">
<span class="text-white text-2xl font-bold">Tamilnadu</span>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">
<a href="#home" class="text-white hover:bg-orange-700 px-3 py-2 rounded-md">Home</a>
<a href="#destinations" class="text-white hover:bg-orange-700 px-3 py-2 rounded-md">Destinations</a>
<a href="#culture" class="text-white hover:bg-orange-700 px-3 py-2 rounded-md">Culture</a>
<a href="#festivals" class="text-white hover:bg-orange-700 px-3 py-2 rounded-md">Festivals</a>
<a href="#cuisine" class="text-white hover:bg-orange-700 px-3 py-2 rounded-md">Cuisine</a>
</div>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<div id="home" class="relative pt-16">
<div class="bg-gradient-to-r from-orange-800 to-orange-600 h-screen flex items-center">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h1 class="text-4xl md:text-6xl font-bold text-white mb-6">Welcome to Tamil Nadu</h1>
<p class="text-xl text-white mb-8">Experience the land of ancient temples, vibrant culture, and timeless traditions</p>
<a href="#destinations" class="bg-white text-orange-800 px-8 py-3 rounded-lg font-semibold hover:bg-orange-100 transition duration-300">Explore Now</a>
</div>
</div>
</div>
<!-- Featured Destinations -->
<section id="destinations" class="py-16 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-center mb-12 text-orange-800">Divine Destinations</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Meenakshi Temple -->
<div class="rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition duration-300">
<img src="/api/placeholder/400/300" alt="Meenakshi Temple" class="w-full h-48 object-cover"/>
<div class="p-6 bg-white">
<h3 class="text-xl font-semibold mb-2">Meenakshi Temple, Madurai</h3>
<p class="text-gray-600">Ancient temple known for its stunning architecture and colorful sculptures</p>
</div>
</div>
<!-- Thanjavur Temple -->
<div class="rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition duration-300">
<img src="/api/placeholder/400/300" alt="Thanjavur Temple" class="w-full h-48 object-cover"/>
<div class="p-6 bg-white">
<h3 class="text-xl font-semibold mb-2">Brihadeeswarar Temple</h3>
<p class="text-gray-600">UNESCO World Heritage site showcasing Chola architecture</p>
</div>
</div>
<!-- Marina Beach -->
<div class="rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition duration-300">
<img src="/api/placeholder/400/300" alt="Marina Beach" class="w-full h-48 object-cover"/>
<div class="p-6 bg-white">
<h3 class="text-xl font-semibold mb-2">Marina Beach, Chennai</h3>
<p class="text-gray-600">World's second-longest urban beach with historic landmarks</p>
</div>
</div>
</div>
</div>
</section>
<!-- Cultural Heritage -->
<section id="culture" class="py-16 bg-amber-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-center mb-12 text-orange-800">Rich Cultural Heritage</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
<div class="space-y-6">
<h3 class="text-2xl font-semibold text-orange-800">Traditional Arts</h3>
<p class="text-gray-700">Experience the classical dance form of Bharatanatyam, traditional Carnatic music, and ancient art forms that have been preserved for generations.</p>
<div class="space-y-4">
<div class="flex items-center">
<span class="w-4 h-4 bg-orange-800 rounded-full mr-3"></span>
<span>Bharatanatyam Dance</span>
</div>
<div class="flex items-center">
<span class="w-4 h-4 bg-orange-800 rounded-full mr-3"></span>
<span>Carnatic Music</span>
</div>
<div class="flex items-center">
<span class="w-4 h-4 bg-orange-800 rounded-full mr-3"></span>
<span>Temple Architecture</span>
</div>
</div>
</div>
<div class="rounded-lg overflow-hidden shadow-xl">
<img src="/api/placeholder/500/400" alt="Cultural Performance" class="w-full h-full object-cover"/>
</div>
</div>
</div>
</section>
<!-- Festivals -->
<section id="festivals" class="py-16 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-center mb-12 text-orange-800">Vibrant Festivals</h2>
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
<div class="p-6 bg-amber-50 rounded-lg text-center">
<h3 class="text-xl font-semibold mb-3">Pongal</h3>
<p class="text-gray-600">Harvest festival celebrating prosperity and gratitude</p>
</div>
<div class="p-6 bg-amber-50 rounded-lg text-center">
<h3 class="text-xl font-semibold mb-3">Thai Pusam</h3>
<p class="text-gray-600">Sacred festival dedicated to Lord Murugan</p>
</div>
<div class="p-6 bg-amber-50 rounded-lg text-center">
<h3 class="text-xl font-semibold mb-3">Madurai Festival</h3>
<p class="text-gray-600">Month-long celebration of art and culture</p>
</div>
<div class="p-6 bg-amber-50 rounded-lg text-center">
<h3 class="text-xl font-semibold mb-3">Dance Festival</h3>
<p class="text-gray-600">Classical dance performances at Mamallapuram</p>
</div>
</div>
</div>
</section>
<!-- Traditional Cuisine -->
<section id="cuisine" class="py-16 bg-amber-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-center mb-12 text-orange-800">Authentic Tamil Cuisine</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white rounded-lg overflow-hidden shadow-lg">
<img src="/api/placeholder/400/300" alt="Traditional Meals" class="w-full h-48 object-cover"/>
<div class="p-6">
<h3 class="text-xl font-semibold mb-2">Traditional Meals</h3>
<p class="text-gray-600">Savor the authentic flavors of Tamil Nadu's traditional banana leaf meals</p>
</div>
</div>
<div class="bg-white rounded-lg overflow-hidden shadow-lg">
<img src="/api/placeholder/400/300" alt="Street Food" class="w-full h-48 object-cover"/>
<div class="p-6">
<h3 class="text-xl font-semibold mb-2">Street Food</h3>
<p class="text-gray-600">Experience the vibrant street food culture of Tamil Nadu</p>
</div>
</div>
<div class="bg-white rounded-lg overflow-hidden shadow-lg">
<img src="/api/placeholder/400/300" alt="Sweets" class="w-full h-48 object-cover"/>
<div class="p-6">
<h3 class="text-xl font-semibold mb-2">Traditional Sweets</h3>
<p class="text-gray-600">Indulge in famous Tamil Nadu sweets and desserts</p>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-orange-800 text-white py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-xl font-semibold mb-4">About Tamil Nadu</h3>
<p class="text-gray-300">Discover the rich heritage, culture, and traditions of Tamil Nadu, a land where ancient meets modern.</p>
</div>
<div>
<h3 class="text-xl font-semibold mb-4">Quick Links</h3>
<ul class="space-y-2">
<li><a href="#destinations" class="text-gray-300 hover:text-white">Destinations</a></li>
<li><a href="#culture" class="text-gray-300 hover:text-white">Culture</a></li>
<li><a href="#festivals" class="text-gray-300 hover:text-white">Festivals</a></li>
<li><a href="#cuisine" class="text-gray-300 hover:text-white">Cuisine</a></li>
</ul>
</div>
<div>
<h3 class="text-xl font-semibold mb-4">Popular Destinations</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-300 hover:text-white">Madurai</a></li>
<li><a href="#" class="text-gray-300 hover:text-white">Thanjavur</a></li>
<li><a href="#" class="text-gray-300 hover:text-white">Chennai</a></li>
<li><a href="#" class="text-gray-300 hover:text-white">Mahabalipuram</a></li>
</ul>
</div>
<div>
<h3 class="text-xl font-semibold mb-4">Contact Us</h3>
<p class="text-gray-300">Email: info@tamilnadutourism.com</p>
<p class="text-gray-300">Phone: +91 44 2852 1000</p>
</div>
</div>
<div class="mt-8 pt-8 border-t border-orange-700 text-center">
<p class="text-gray-300">© 2025 Tamil Nadu Tourism. All rights reserved.</p>
</div>
</div>
</footer>
</body>
</html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.