Styled Drawer - Copy this React, Mui Component to your project
<div id="app" class="min-h-screen bg-pink-50"> <!-- Sidebar --> <div id="sidebar" class="fixed left-0 top-0 w-64 h-full bg-white p-6 border-r border-gray-100"> <div class="mb-8"> <div class="text-2xl font-bold text-pink-500">ColorTV</div> </div> <button class="w-full bg-pink-500 text-white rounded-xl py-3 px-6 flex items-center mb-8"> <span>Generate</span> <i class="fa-solid fa-wand-magic-sparkles ml-auto"></i> </button> <nav class="space-y-4"> <a href="#" class="flex items-center text-gray-700 py-2"> <i class="fa-regular fa-building w-6"></i> <span class="ml-3">Brands</span> </a> <a href="#" class="flex items-center text-pink-500 py-2 border-l-4 border-pink-500 pl-[-4px]"> <i class="fa-regular fa-folder w-6"></i> <span class="ml-3">Projects</span> </a> <a href="#" class="flex items-center text-gray-700 py-2"> <i class="fa-regular fa-chart-bar w-6"></i> <span class="ml-3">Competitor Insights</span> </a> <a href="#" class="flex items-center text-gray-700 py-2"> <i class="fa-regular fa-star w-6"></i> <span class="ml-3">Creative Scoring AI</span> <span class="ml-2 text-xs bg-gradient-to-r from-pink-500 to-purple-500 text-white px-2 py-0.5 rounded">PRO</span> </a> <a href="#" class="flex items-center text-gray-700 py-2"> <i class="fa-regular fa-gem w-6"></i> <span class="ml-3">Creative Utility Suite</span> <span class="ml-2 text-xs bg-gradient-to-r from-pink-500 to-purple-500 text-white px-2 py-0.5 rounded">PRO</span> </a> <a href="#" class="flex items-center text-gray-700 py-2"> <i class="fa-solid fa-microphone w-6"></i> <span class="ml-3">Voice Over</span> </a> <a href="#" class="flex items-center text-gray-700 py-2"> <i class="fa-regular fa-gear w-6"></i> <span class="ml-3">Settings</span> </a> <a href="#" class="flex items-center text-white py-2 bg-purple-500 rounded-lg px-4"> <i class="fa-regular fa-book-open w-6"></i> <span class="ml-3">Library</span> </a> </nav> <div class="absolute bottom-0 left-0 w-full p-6"> <div class="bg-white rounded-xl p-4 shadow-sm"> <button class="flex items-center text-gray-700 mb-4"> <i class="fa-solid fa-download mr-2"></i> Get Free Downloads </button> <div class="text-sm text-gray-600">Professional 200</div> <div class="text-xs text-gray-500">More downloads in 1 month</div> <div class="text-2xl text-pink-500 font-bold mt-2">199 Downloads</div> </div> </div> </div> <!-- Main Content --> <div id="main-content" class="ml-64 p-6"> <!-- Header --> <header id="header" class="flex items-center justify-between mb-8"> <div class="flex items-center bg-white rounded-lg px-4 py-2 w-64"> <img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-1.jpg" class="w-6 h-6 rounded-full"> <span class="ml-2">Shameless Snacks</span> <i class="fa-solid fa-chevron-down ml-auto"></i> </div> <div class="flex items-center space-x-4"> <button class="bg-black text-white rounded-lg px-4 py-2 flex items-center"> <i class="fa-solid fa-fire mr-2"></i> Black Friday Offer </button> <button class="bg-white rounded-lg px-4 py-2 flex items-center"> <i class="fa-solid fa-download mr-2"></i> Additional Downloads <span class="ml-2 bg-pink-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">1</span> </button> <span class="bg-pink-500 text-white rounded-lg px-4 py-2">GM</span> </div> </header> <!-- Fashion Photoshoots Section --> <div id="fashion-section" class="bg-white rounded-2xl shadow-lg p-8 mb-8"> <div class="flex items-center justify-between mb-8"> <div class="flex items-center"> <div class="w-14 h-14 bg-gradient-to-br from-pink-500 to-purple-500 rounded-2xl flex items-center justify-center shadow-lg shadow-pink-100"> <i class="fa-solid fa-camera text-white text-2xl"></i> </div> <div class="ml-5"> <h1 class="text-3xl font-bold bg-gradient-to-r from-pink-500 to-purple-500 bg-clip-text text-transparent">Fashion Photoshoots</h1> <p class="text-gray-600 mt-1">Transform your clothing catalog with AI-powered model fitting</p> </div> </div> <div class="flex items-center gap-3"> <span class="text-sm text-gray-500">Step 1 of 3</span> <div class="w-32 h-2 bg-gray-100 rounded-full"> <div class="w-1/3 h-full bg-gradient-to-r from-pink-500 to-purple-500 rounded-full"></div> </div> </div> </div> <div class="bg-gray-50 rounded-2xl p-8 border border-gray-100"> <div class="flex items-center justify-between mb-8"> <div class="flex items-center"> <div class="w-12 h-12 bg-white rounded-xl flex items-center justify-center shadow-sm"> <i class="fa-solid fa-shirt text-pink-500 text-xl"></i> </div> <div class="ml-4"> <h2 class="text-xl font-semibold">Select Fitting Type</h2> <p class="text-gray-500 text-sm mt-1">Choose the perfect fit for your fashion items</p> </div> </div> <button class="text-gray-400 hover:text-gray-600 transition-colors"> <i class="fa-solid fa-circle-question text-xl"></i> </button> </div> <div class="grid grid-cols-4 gap-8"> <div class="group bg-gradient-to-br from-gray-900 to-gray-800 rounded-2xl p-5 transform hover:-translate-y-1 transition-all duration-200 cursor-pointer"> <div class="relative mb-4"> <img class="w-full h-72 object-cover rounded-xl" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/d0716afeb8-59989ffb442b5a7ac080.png"> <div class="absolute top-3 right-3 bg-pink-500 text-white text-xs px-3 py-1 rounded-full">Popular</div> </div> <h3 class="text-lg font-semibold text-white mb-2">Upper Body</h3> <p class="text-sm text-gray-300">Perfect for shirts, tops, jackets and more</p> <div class="flex items-center mt-4 text-pink-300"> <i class="fa-solid fa-clock text-sm mr-2"></i> <span class="text-xs">Processing time: ~2 mins</span> </div> </div> <div class="bg-white rounded-2xl p-5 border border-gray-200 hover:border-pink-200 hover:shadow-lg transition-all duration-200 cursor-pointer"> <div class="relative mb-4"> <img class="w-full h-72 object-cover rounded-xl" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/0b15ce27fa-38585ac399dd445fdfa6.png"> </div> <h3 class="text-lg font-semibold text-gray-800 mb-2">Lower Body</h3> <p class="text-sm text-gray-600">Ideal for pants, skirts and shorts</p> <div class="flex items-center mt-4 text-gray-400"> <i class="fa-solid fa-clock text-sm mr-2"></i> <span class="text-xs">Processing time: ~2 mins</span> </div> </div> <div class="bg-white rounded-2xl p-5 border border-gray-200 hover:border-pink-200 hover:shadow-lg transition-all duration-200 cursor-pointer"> <div class="relative mb-4"> <img class="w-full h-72 object-cover rounded-xl" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/3073bde637-5d20ccf6f794410dbf6b.png"> </div> <h3 class="text-lg font-semibold text-gray-800 mb-2">Full Outfit</h3> <p class="text-sm text-gray-600">Complete looks from head to toe</p> <div class="flex items-center mt-4 text-gray-400"> <i class="fa-solid fa-clock text-sm mr-2"></i> <span class="text-xs">Processing time: ~3 mins</span> </div> </div> <div class="bg-white rounded-2xl p-5 border border-gray-200 hover:border-pink-200 hover:shadow-lg transition-all duration-200 cursor-pointer"> <div class="relative mb-4"> <img class="w-full h-72 object-cover rounded-xl" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/526c6be8d5-19ae228c5420052867b3.png"> <div class="absolute top-3 right-3 bg-purple-500 text-white text-xs px-3 py-1 rounded-full">New</div> </div> <h3 class="text-lg font-semibold text-gray-800 mb-2">Dresses</h3> <p class="text-sm text-gray-600">Specialized fitting for all dress styles</p> <div class="flex items-center mt-4 text-gray-400"> <i class="fa-solid fa-clock text-sm mr-2"></i> <span class="text-xs">Processing time: ~2 mins</span> </div> </div> </div> <div class="flex justify-between items-center mt-8 pt-6 border-t border-gray-200"> <button class="text-gray-500 hover:text-gray-700 flex items-center transition-colors"> <i class="fa-solid fa-arrow-left mr-2"></i> Back to Projects </button> <div class="flex items-center gap-4"> <button class="px-6 py-3 text-gray-500 hover:text-gray-700 transition-colors">Cancel</button> <button class="bg-gradient-to-r from-pink-500 to-purple-500 text-white rounded-xl px-8 py-3 flex items-center gap-2 hover:shadow-lg transition-all duration-200"> Continue <i class="fa-solid fa-arrow-right"></i> </button> </div> </div> </div> </div> </div> </div>