| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>தமிழ் காதல் கதைகள் | Tamil Erotic Stories</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| .story-card { |
| transition: all 0.3s ease; |
| background: linear-gradient(135deg, #f5f7fa 0%, #ffeef8 100%); |
| } |
| .story-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); |
| } |
| .gradient-text { |
| background: linear-gradient(45deg, #ff6b6b, #ff8e8e); |
| -webkit-background-clip: text; |
| background-clip: text; |
| color: transparent; |
| } |
| .blur-overlay { |
| backdrop-filter: blur(5px); |
| background-color: rgba(255,255,255,0.7); |
| } |
| .category-chip { |
| transition: all 0.2s ease; |
| } |
| .category-chip:hover { |
| transform: scale(1.05); |
| } |
| .tamil-font { |
| font-family: 'Latha', 'Arial Unicode MS', sans-serif; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 font-sans"> |
| |
| <header class="bg-white shadow-sm sticky top-0 z-50"> |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-book-open text-pink-500 text-2xl"></i> |
| <h1 class="text-xl font-bold gradient-text">தமிழ் காதல் கதைகள்</h1> |
| </div> |
| <nav class="hidden md:flex space-x-8"> |
| <a href="#" class="text-gray-700 hover:text-pink-500 font-medium">முகப்பு</a> |
| <a href="#" class="text-gray-700 hover:text-pink-500 font-medium">கதைகள்</a> |
| <a href="#" class="text-gray-700 hover:text-pink-500 font-medium">எழுத்தாளர்கள்</a> |
| <a href="#" class="text-gray-700 hover:text-pink-500 font-medium">பகிர்வுகள்</a> |
| </nav> |
| <div class="flex items-center space-x-4"> |
| <button class="bg-pink-500 hover:bg-pink-600 text-white px-4 py-2 rounded-full text-sm font-medium transition"> |
| <i class="fas fa-user-plus mr-1"></i> பதிவு |
| </button> |
| <button class="hidden md:block border border-pink-500 text-pink-500 hover:bg-pink-50 px-4 py-2 rounded-full text-sm font-medium transition"> |
| <i class="fas fa-sign-in-alt mr-1"></i> உள்நுழை |
| </button> |
| <button class="md:hidden text-gray-600"> |
| <i class="fas fa-bars text-xl"></i> |
| </button> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <section class="relative bg-gradient-to-r from-pink-100 to-purple-100 py-16 md:py-24"> |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-10 md:mb-0"> |
| <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4 tamil-font">உங்கள் காதல் கற்பனைகளை எழுதுங்கள்</h1> |
| <p class="text-lg text-gray-600 mb-8 tamil-font">தமிழில் உங்கள் உணர்ச்சிகரமான, காதல் நிறைந்த கதைகளை பகிர்ந்து கொள்ளுங்கள். ஆயிரக்கணக்கான வாசகர்களுடன் உங்கள் எழுத்துக்களை பகிர்ந்து கொள்ளுங்கள்.</p> |
| <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4"> |
| <button class="bg-pink-500 hover:bg-pink-600 text-white px-6 py-3 rounded-full font-medium transition flex items-center justify-center"> |
| <i class="fas fa-pen-fancy mr-2"></i> கதை எழுதுங்கள் |
| </button> |
| <button class="border border-pink-500 text-pink-500 hover:bg-pink-50 px-6 py-3 rounded-full font-medium transition flex items-center justify-center"> |
| <i class="fas fa-book-reader mr-2"></i> கதைகளைப் படியுங்கள் |
| </button> |
| </div> |
| </div> |
| <div class="md:w-1/2 flex justify-center"> |
| <div class="relative w-full max-w-md"> |
| <div class="absolute -top-6 -left-6 w-32 h-32 bg-purple-200 rounded-full opacity-70"></div> |
| <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-pink-200 rounded-full opacity-70"></div> |
| <div class="relative bg-white p-6 rounded-xl shadow-lg blur-overlay"> |
| <div class="flex items-center mb-4"> |
| <div class="w-10 h-10 rounded-full bg-pink-100 flex items-center justify-center"> |
| <i class="fas fa-user text-pink-500"></i> |
| </div> |
| <div class="ml-3"> |
| <h4 class="font-medium tamil-font">ரம்யா</h4> |
| <p class="text-xs text-gray-500">2 நாட்களுக்கு முன்</p> |
| </div> |
| </div> |
| <h3 class="font-bold text-lg mb-2 tamil-font">அவள் வீட்டு மாடி</h3> |
| <p class="text-gray-600 text-sm mb-3 tamil-font">அந்த மழை நாளில் அவள் வீட்டு மாடியில் நடந்தது... அவள் உடையின் ஈரம், என் மனதை ஈரப்படுத்தியது...</p> |
| <div class="flex justify-between items-center"> |
| <div class="flex space-x-2"> |
| <span class="text-xs px-2 py-1 bg-pink-100 text-pink-600 rounded-full tamil-font">காதல்</span> |
| <span class="text-xs px-2 py-1 bg-purple-100 text-purple-600 rounded-full tamil-font">உணர்ச்சி</span> |
| </div> |
| <div class="flex items-center text-gray-500 text-sm"> |
| <i class="fas fa-heart mr-1 text-pink-400"></i> 124 |
| <i class="fas fa-comment ml-3 mr-1 text-blue-400"></i> 23 |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-12 bg-white"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-2xl font-bold text-center mb-10 tamil-font">கதை வகைகள்</h2> |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 lg:grid-cols-7 gap-4"> |
| <a href="#" class="category-chip bg-pink-50 hover:bg-pink-100 text-pink-600 px-4 py-2 rounded-full text-center text-sm font-medium tamil-font"> |
| <i class="fas fa-heart mr-1"></i> காதல் |
| </a> |
| <a href="#" class="category-chip bg-purple-50 hover:bg-purple-100 text-purple-600 px-4 py-2 rounded-full text-center text-sm font-medium tamil-font"> |
| <i class="fas fa-fire mr-1"></i> உணர்ச்சி |
| </a> |
| <a href="#" class="category-chip bg-blue-50 hover:bg-blue-100 text-blue-600 px-4 py-2 rounded-full text-center text-sm font-medium tamil-font"> |
| <i class="fas fa-venus-mars mr-1"></i> லெஸ்பியன் |
| </a> |
| <a href="#" class="category-chip bg-yellow-50 hover:bg-yellow-100 text-yellow-600 px-4 py-2 rounded-full text-center text-sm font-medium tamil-font"> |
| <i class="fas fa-user-secret mr-1"></i> ரகசியம் |
| </a> |
| <a href="#" class="category-chip bg-green-50 hover:bg-green-100 text-green-600 px-4 py-2 rounded-full text-center text-sm font-medium tamil-font"> |
| <i class="fas fa-home mr-1"></i> திருமணம் |
| </a> |
| <a href="#" class="category-chip bg-red-50 hover:bg-red-100 text-red-600 px-4 py-2 rounded-full text-center text-sm font-medium tamil-font"> |
| <i class="fas fa-hand-holding-heart mr-1"></i> முதல் முறை |
| </a> |
| <a href="#" class="category-chip bg-indigo-50 hover:bg-indigo-100 text-indigo-600 px-4 py-2 rounded-full text-center text-sm font-medium tamil-font"> |
| <i class="fas fa-moon mr-1"></i> இரவு நேரம் |
| </a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-12 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <div class="flex justify-between items-center mb-8"> |
| <h2 class="text-2xl font-bold tamil-font">பிரபலமான கதைகள்</h2> |
| <a href="#" class="text-pink-500 hover:text-pink-600 font-medium flex items-center tamil-font"> |
| அனைத்தையும் பார்க்க <i class="fas fa-arrow-right ml-1"></i> |
| </a> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
| |
| <div class="story-card rounded-xl overflow-hidden shadow-md"> |
| <div class="h-48 bg-gradient-to-r from-purple-400 to-pink-400 flex items-center justify-center"> |
| <i class="fas fa-book-open text-white text-5xl opacity-30"></i> |
| </div> |
| <div class="p-6"> |
| <div class="flex items-center mb-3"> |
| <div class="w-8 h-8 rounded-full bg-pink-100 flex items-center justify-center"> |
| <i class="fas fa-user text-pink-500 text-sm"></i> |
| </div> |
| <div class="ml-2"> |
| <h4 class="text-sm font-medium tamil-font">கவிதா</h4> |
| </div> |
| </div> |
| <h3 class="font-bold text-lg mb-2 tamil-font">அவன் கைகளின் சூடு</h3> |
| <p class="text-gray-600 text-sm mb-4 tamil-font">அவன் கைகள் என் உடலில் ஊர்ந்தபோது... அந்த சூடு என் உள்ளத்தை கிளறியது...</p> |
| <div class="flex justify-between items-center"> |
| <div class="flex space-x-2"> |
| <span class="text-xs px-2 py-1 bg-pink-100 text-pink-600 rounded-full tamil-font">காதல்</span> |
| </div> |
| <div class="flex items-center text-gray-500 text-xs"> |
| <i class="fas fa-eye mr-1"></i> 2.4K |
| <i class="fas fa-heart ml-3 mr-1 text-pink-400"></i> 356 |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="story-card rounded-xl overflow-hidden shadow-md"> |
| <div class="h-48 bg-gradient-to-r from-blue-400 to-indigo-400 flex items-center justify-center"> |
| <i class="fas fa-book-open text-white text-5xl opacity-30"></i> |
| </div> |
| <div class="p-6"> |
| <div class="flex items-center mb-3"> |
| <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center"> |
| <i class="fas fa-user text-blue-500 text-sm"></i> |
| </div> |
| <div class="ml-2"> |
| <h4 class="text-sm font-medium tamil-font">மாலன்</h4> |
| </div> |
| </div> |
| <h3 class="font-bold text-lg mb-2 tamil-font">மழை நாளின் ரகசியம்</h3> |
| <p class="text-gray-600 text-sm mb-4 tamil-font">அந்த மழை நாளில் என் அறைக்கு வந்த அவள்... நனைந்த உடையுடன்... என் உள்ளத்தை கொள்ளை கொண்டாள்...</p> |
| <div class="flex justify-between items-center"> |
| <div class="flex space-x-2"> |
| <span class="text-xs px-2 py-1 bg-blue-100 text-blue-600 rounded-full tamil-font">ரகசியம்</span> |
| </div> |
| <div class="flex items-center text-gray-500 text-xs"> |
| <i class="fas fa-eye mr-1"></i> 3.1K |
| <i class="fas fa-heart ml-3 mr-1 text-pink-400"></i> 421 |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="story-card rounded-xl overflow-hidden shadow-md"> |
| <div class="h-48 bg-gradient-to-r from-red-400 to-orange-400 flex items-center justify-center"> |
| <i class="fas fa-book-open text-white text-5xl opacity-30"></i> |
| </div> |
| <div class="p-6"> |
| <div class="flex items-center mb-3"> |
| <div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center"> |
| <i class="fas fa-user text-red-500 text-sm"></i> |
| </div> |
| <div class="ml-2"> |
| <h4 class="text-sm font-medium tamil-font">பிரியா</h4> |
| </div> |
| </div> |
| <h3 class="font-bold text-lg mb-2 tamil-font">அவள் முதல் இரவு</h3> |
| <p class="text-gray-600 text-sm mb-4 tamil-font">திருமணத்தின் முதல் இரவு... அவளின் பயம், என் பாசம்... இருவரும் கண்டுபிடித்த அந்த இன்பம்...</p> |
| <div class="flex justify-between items-center"> |
| <div class="flex space-x-2"> |
| <span class="text-xs px-2 py-1 bg-red-100 text-red-600 rounded-full tamil-font">திருமணம்</span> |
| </div> |
| <div class="flex items-center text-gray-500 text-xs"> |
| <i class="fas fa-eye mr-1"></i> 4.2K |
| <i class="fas fa-heart ml-3 mr-1 text-pink-400"></i> 587 |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-12 bg-white"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-2xl font-bold text-center mb-10 tamil-font">முன்னணி எழுத்தாளர்கள்</h2> |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6"> |
| |
| <div class="text-center"> |
| <div class="w-20 h-20 mx-auto rounded-full bg-pink-100 flex items-center justify-center mb-3"> |
| <i class="fas fa-user text-pink-500 text-2xl"></i> |
| </div> |
| <h4 class="font-medium tamil-font">ராணி</h4> |
| <p class="text-sm text-gray-500 tamil-font">24 கதைகள்</p> |
| </div> |
| |
| |
| <div class="text-center"> |
| <div class="w-20 h-20 mx-auto rounded-full bg-blue-100 flex items-center justify-center mb-3"> |
| <i class="fas fa-user text-blue-500 text-2xl"></i> |
| </div> |
| <h4 class="font-medium tamil-font">கார்த்தி</h4> |
| <p class="text-sm text-gray-500 tamil-font">18 கதைகள்</p> |
| </div> |
| |
| |
| <div class="text-center"> |
| <div class="w-20 h-20 mx-auto rounded-full bg-purple-100 flex items-center justify-center mb-3"> |
| <i class="fas fa-user text-purple-500 text-2xl"></i> |
| </div> |
| <h4 class="font-medium tamil-font">மாயா</h4> |
| <p class="text-sm text-gray-500 tamil-font">32 கதைகள்</p> |
| </div> |
| |
| |
| <div class="text-center"> |
| <div class="w-20 h-20 mx-auto rounded-full bg-yellow-100 flex items-center justify-center mb-3"> |
| <i class="fas fa-user text-yellow-500 text-2xl"></i> |
| </div> |
| <h4 class="font-medium tamil-font">அருண்</h4> |
| <p class="text-sm text-gray-500 tamil-font">15 கதைகள்</p> |
| </div> |
| |
| |
| <div class="text-center"> |
| <div class="w-20 h-20 mx-auto rounded-full bg-green-100 flex items-center justify-center mb-3"> |
| <i class="fas fa-user text-green-500 text-2xl"></i> |
| </div> |
| <h4 class="font-medium tamil-font">வாணி</h4> |
| <p class="text-sm text-gray-500 tamil-font">27 கதைகள்</p> |
| </div> |
| |
| |
| <div class="text-center"> |
| <div class="w-20 h-20 mx-auto rounded-full bg-red-100 flex items-center justify-center mb-3"> |
| <i class="fas fa-user text-red-500 text-2xl"></i> |
| </div> |
| <h4 class="font-medium tamil-font">சிவா</h4> |
| <p class="text-sm text-gray-500 tamil-font">21 கதைகள்</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-gradient-to-r from-pink-500 to-purple-500 text-white"> |
| <div class="container mx-auto px-4 text-center"> |
| <h2 class="text-3xl font-bold mb-4 tamil-font">உங்கள் காதல் கதைகளை எழுதத் தொடங்குங்கள்</h2> |
| <p class="text-lg mb-8 max-w-2xl mx-auto tamil-font">ஆயிரக்கணக்கான வாசகர்களுக்கு உங்கள் கற்பனைகளை பகிர்ந்து கொள்ளுங்கள். உங்கள் எழுத்து மூலம் மற்றவர்களின் இதயங்களை தொடவும்.</p> |
| <button class="bg-white text-pink-500 hover:bg-gray-100 px-8 py-3 rounded-full font-bold transition shadow-lg"> |
| <i class="fas fa-pen-alt mr-2"></i> இலவசமாக பதிவு செய்க |
| </button> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-800 text-white py-12"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| <div> |
| <div class="flex items-center space-x-2 mb-4"> |
| <i class="fas fa-book-open text-pink-400 text-2xl"></i> |
| <h3 class="text-xl font-bold gradient-text">தமிழ் காதல் கதைகள்</h3> |
| </div> |
| <p class="text-gray-400 text-sm tamil-font">தமிழில் உணர்ச்சிகரமான காதல் கதைகளை எழுதவும் படிக்கவும் சிறந்த தளம்.</p> |
| </div> |
| <div> |
| <h4 class="font-bold text-lg mb-4 tamil-font">இணைப்புகள்</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white transition tamil-font">முகப்பு</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition tamil-font">கதைகள்</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition tamil-font">எழுத்தாளர்கள்</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition tamil-font">விதிமுறைகள்</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="font-bold text-lg mb-4 tamil-font">வகைகள்</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white transition tamil-font">காதல் கதைகள்</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition tamil-font">உணர்ச்சி கதைகள்</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition tamil-font">திருமண கதைகள்</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition tamil-font">ரகசிய கதைகள்</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="font-bold text-lg mb-4 tamil-font">தொடர்பு கொள்ள</h4> |
| <div class="flex space-x-4 mb-4"> |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-700 hover:bg-pink-500 flex items-center justify-center transition"> |
| <i class="fab fa-facebook-f"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-700 hover:bg-blue-400 flex items-center justify-center transition"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-700 hover:bg-pink-600 flex items-center justify-center transition"> |
| <i class="fab fa-instagram"></i> |
| </a> |
| </div> |
| <p class="text-gray-400 text-sm tamil-font">tamilerotic@gmail.com</p> |
| </div> |
| </div> |
| <div class="border-t border-gray-700 mt-10 pt-6 text-center text-gray-400 text-sm tamil-font"> |
| <p>© 2023 தமிழ் காதல் கதைகள். அனைத்து உரிமைகளும் பாதுகாக்கப்பட்டவை.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| document.querySelector('.md\\:hidden').addEventListener('click', function() { |
| |
| alert('Mobile menu would open here in a complete implementation'); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=natrajag/testing" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> |
| </html> |
