WEBLEB
Home
AI Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
React Tailwind Hero Component Example
15
hounsapasphile
Open In Editor
Video
Publish Your Code
0
Recommended
15 September 2025
CSS Grid Animation Example
23 November 2025
Firefly Button HTML CSS Tailwind
28 August 2025
Architecture & Design Website with Tailwind CSS
HTML
Copy
<!-- Replace with your HTML Code (Leave empty if not needed) --> <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Composant Héro React/Tailwind</title> <script src="https://cdn.tailwindcss.com"></script> <script src="https://unpkg.com/react@18/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet"> <style> body { font-family: 'Inter', sans-serif; } </style> </head> <body class="bg-gray-50"> <div id="root"></div> <script type="text/babel"> const { useState } = React; const Hero = () => { return ( <div className="relative bg-white overflow-hidden"> {/* Décoration d'arrière-plan */} <div className="hidden lg:block lg:absolute lg:inset-y-0 lg:h-full lg:w-full"> <div className="relative h-full text-lg max-w-prose mx-auto" aria-hidden="true"> <svg className="absolute top-12 left-full transform translate-x-32" width="404" height="384" fill="none" viewBox="0 0 404 384"> <defs> <pattern id="74b3fd99-0a6f-4271-bef2-e80eeafdf357" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="4" height="4" className="text-gray-200" fill="currentColor" /> </pattern> </defs> <rect width="404" height="384" fill="url(#74b3fd99-0a6f-4271-bef2-e80eeafdf357)" /> </svg> </div> </div> <div className="relative pt-6 pb-16 sm:pb-24 lg:pb-32"> <main className="mt-16 mx-auto max-w-7xl px-4 sm:mt-24 sm:px-6 lg:mt-32"> <div className="lg:grid lg:grid-cols-12 lg:gap-8"> <div className="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left"> <h1> <span className="block text-sm font-semibold uppercase tracking-wide text-indigo-600 sm:text-base lg:text-sm xl:text-base"> Nouveau lancement </span> <span className="mt-1 block text-4xl tracking-tight font-extrabold sm:text-5xl xl:text-6xl"> <span className="block text-gray-900">Propulsez votre projet</span> <span className="block text-indigo-600">vers le futur</span> </span> </h1> <p className="mt-3 text-base text-gray-500 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl"> Créez des interfaces modernes, performantes et entièrement responsives avec React, TypeScript et Tailwind CSS. Le point de départ idéal pour votre prochaine application SaaS. </p> <div className="mt-8 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0"> <div className="flex flex-col sm:flex-row gap-4"> <button className="flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 transition duration-150 ease-in-out shadow-lg"> Démarrer maintenant </button> <button className="flex items-center justify-center px-8 py-3 border border-gray-300 text-base font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 transition duration-150 ease-in-out"> Voir la démo </button> </div> <p className="mt-3 text-sm text-gray-500"> Aucune carte de crédit requise. Essai gratuit de 14 jours. </p> </div> </div> <div className="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center"> <div className="relative mx-auto w-full rounded-lg shadow-2xl lg:max-w-md overflow-hidden"> <div className="relative block w-full bg-white rounded-lg overflow-hidden"> <img className="w-full h-full object-cover" src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?ixlib=rb-1.2.1&auto=format&fit=crop&w=1352&q=80" alt="Espace de travail moderne" /> <div className="absolute inset-0 w-full h-full flex items-center justify-center" aria-hidden="true"> <svg className="h-20 w-20 text-indigo-500" fill="currentColor" viewBox="0 0 84 84"> <circle opacity="0.9" cx="42" cy="42" r="42" fill="white" /> <path d="M55.5039 40.3359L37.1094 28.0729C35.7803 27.1869 34 28.1396 34 29.737V54.263C34 55.8604 35.7803 56.8131 37.1094 55.9271L55.5038 43.6641C56.6913 42.8725 56.6913 41.1275 55.5039 40.3359Z" /> </svg> </div> </div> </div> </div> </div> </main> </div> </div> ); }; const App = () => { return ( <div> <Hero /> </div> ); }; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<App />); </script> </body> </html>
CSS
Copy
/* Replace with your CSS Code (Leave empty if not needed) */
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
