<section class="py-24">
<div class="container mx-auto px-4">
<div class="inline-block py-1 px-2 rounded-md bg-orange-50 border border-orange-100 text-orange-500 text-sm font-medium mb-4">Events</div>
<h1 class="text-4xl lg:text-5xl font-bold font-heading mb-18 max-w-lg">Engage in our weekly online events</h1>
<div class="border border-gray-100 rounded-3xl pt-6 px-6 mb-12">
<div class="flex items-center justify-between flex-wrap gap-4 mb-4">
<div class="flex items-center gap-2 flex-wrap">
<p class="font-bold font-heading">August</p>
<p class="text-gray-500 font-medium">2023</p>
<a class="text-gray-400 hover:text-gray-600 transition duration-200" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M13 5.5L8 10.5L3 5.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</a>
</div>
<div class="flex flex-wrap gap-2">
<a class="py-2 px-4 rounded-full border border-gray-200 shadow text-sm font-semibold hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200" href="#">Today</a>
<a class="p-2 rounded-full border border-gray-200 shadow hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<path d="M13.125 16.25L6.875 10L13.125 3.75" stroke="#282828" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</a>
<a class="p-2 rounded-full border border-gray-200 shadow hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<path d="M6.875 3.75L13.125 10L6.875 16.25" stroke="#282828" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</a>
</div>
</div>
<div class="overflow-x-auto relative">
<div class="absolute bottom-0 left-0 w-full h-24" style="background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.60) 53.65%, #FFF 100%);"></div>
<div class="flex">
<div class="flex flex-col flex-1">
<div class="border-t border-b border-gray-50 py-2 px-24">
<p class="text-center text-gray-500 text-sm font-semibold">Mon</p>
</div>
<div class="flex-1 border-r border-gray-50">
<a class="bg-orange-50 py-3 px-4 flex flex-wrap gap-3 hover:bg-orange-100 transition duration-200" href="#">
<div class="bg-orange-500 w-5 h-5 flex items-center justify-center rounded-md">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
<path d="M8.35879 8.2051L8.35996 8.20616C8.77017 8.57643 8.9041 9.14137 8.70399 9.65877C8.50383 10.1713 8.02404 10.5 7.46999 10.5H4.52499C3.97517 10.5 3.49091 10.1706 3.29102 9.65885C3.09086 9.14143 3.22479 8.57645 3.63502 8.20616L3.63502 8.20616L3.63619 8.20509L5.51319 6.5H6.48179L8.35879 8.2051ZM5.08999 9.57H6.90999C7.37113 9.57 7.74999 9.19114 7.74999 8.73C7.74999 8.27365 7.3809 7.89 6.90999 7.89H5.08999C4.62885 7.89 4.24999 8.26886 4.24999 8.73C4.24999 9.18634 4.61907 9.57 5.08999 9.57Z" fill="white" stroke="white"></path>
<path d="M9.17496 2.16C8.89996 1.455 8.22996 1 7.47496 1H4.52496C3.76996 1 3.09996 1.455 2.82496 2.16C2.55496 2.87 2.73996 3.655 3.30496 4.165L5.32496 6H6.67996L8.69996 4.165C9.25996 3.655 9.44496 2.87 9.17496 2.16ZM6.90996 3.615H5.08996C4.89996 3.615 4.74996 3.46 4.74996 3.275C4.74996 3.09 4.90496 2.935 5.08996 2.935H6.90996C7.09996 2.935 7.24996 3.09 7.24996 3.275C7.24996 3.46 7.09496 3.615 6.90996 3.615Z" fill="white"></path>
</svg>
</div>
<div>
<p class="text-orange-900 text-xs font-bold font-heading mb-1">Study Method with Mark</p>
<p class="text-gray-600 text-xs mb-3">9:00 AM − 10:00 AM (1h)</p>
<div class="inline-block py-1 px-2 rounded-md bg-orange-50 border border-orange-100 text-orange-500 text-xs font-medium mb-4">Producvitity</div>
</div>
</a>
</div>
</div>
<div class="flex flex-col flex-1">
<div class="border-t border-b border-gray-50 py-2 px-24">
<p class="text-center text-gray-500 text-sm font-semibold">Tue</p>
</div>
<div class="flex-1 border-r border-gray-50">
<div class="h-72"></div>
<div class="border-t border-gray-50 pt-3 pb-6 px-4">
<div class="flex flex-wrap gap-3 mb-4">
<div class="rounded-md border border-gray-100 bg-white w-5 h-5 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
<path d="M9.25 11.375C8.08 11.375 7.125 10.42 7.125 9.25V9C7.125 8.795 7.295 8.625 7.5 8.625C7.705 8.625 7.875 8.795 7.875 9V9.25C7.875 10.01 8.49 10.625 9.25 10.625C10.01 10.625 10.625 10.01 10.625 9.25C10.625 8.49 10.01 7.875 9.25 7.875H1C0.795 7.875 0.625 7.705 0.625 7.5C0.625 7.295 0.795 7.125 1 7.125H9.25C10.42 7.125 11.375 8.08 11.375 9.25C11.375 10.42 10.42 11.375 9.25 11.375Z" fill="#B8B8B8"></path>
<path d="M9.25 6.375H1C0.795 6.375 0.625 6.205 0.625 6C0.625 5.795 0.795 5.625 1 5.625H9.25C10.01 5.625 10.625 5.01 10.625 4.25C10.625 3.49 10.01 2.875 9.25 2.875C8.49 2.875 7.875 3.49 7.875 4.25V4.5C7.875 4.705 7.705 4.875 7.5 4.875C7.295 4.875 7.125 4.705 7.125 4.5V4.25C7.125 3.08 8.08 2.125 9.25 2.125C10.42 2.125 11.375 3.08 11.375 4.25C11.375 5.42 10.42 6.375 9.25 6.375Z" fill="#B8B8B8"></path>
<path d="M4.655 4.875H1C0.795 4.875 0.625 4.705 0.625 4.5C0.625 4.295 0.795 4.125 1 4.125H4.655C5.19 4.125 5.625 3.69 5.625 3.155C5.625 2.62 5.19 2.185 4.655 2.185C4.12 2.185 3.685 2.62 3.685 3.155V3.345C3.685 3.55 3.515 3.72 3.31 3.72C3.105 3.72 2.935 3.555 2.935 3.345V3.155C2.935 2.205 3.705 1.435 4.655 1.435C5.605 1.435 6.375 2.205 6.375 3.155C6.375 4.105 5.605 4.875 4.655 4.875Z" fill="#B8B8B8"></path>
</svg>
</div>
<div>
<div class="bg-gray-100 rounded-xs h-2 w-36 mb-2"></div>
<div class="bg-gray-50 rounded-xs h-2 w-32"></div>
</div>
</div>
<div class="inline-block px-2 py-1 rounded-md border border-gray-100 text-gray-700 text-xs font-medium">Chats</div>
</div>
</div>
</div>
<div class="flex flex-col flex-1">
<div class="border-t border-b border-gray-50 py-2 px-24">
<p class="text-center text-gray-500 text-sm font-semibold">Wed</p>
</div>
<div class="flex-1 border-r border-gray-50">
<div class="h-12"></div>
<a class="bg-orange-50 py-3 px-4 flex flex-wrap gap-3 hover:bg-orange-100 transition duration-200" href="#">
<div class="bg-orange-500 w-5 h-5 flex items-center justify-center rounded-md">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
<path d="M8.35879 8.2051L8.35996 8.20616C8.77017 8.57643 8.9041 9.14137 8.70399 9.65877C8.50383 10.1713 8.02404 10.5 7.46999 10.5H4.52499C3.97517 10.5 3.49091 10.1706 3.29102 9.65885C3.09086 9.14143 3.22479 8.57645 3.63502 8.20616L3.63502 8.20616L3.63619 8.20509L5.51319 6.5H6.48179L8.35879 8.2051ZM5.08999 9.57H6.90999C7.37113 9.57 7.74999 9.19114 7.74999 8.73C7.74999 8.27365 7.3809 7.89 6.90999 7.89H5.08999C4.62885 7.89 4.24999 8.26886 4.24999 8.73C4.24999 9.18634 4.61907 9.57 5.08999 9.57Z" fill="white" stroke="white"></path>
<path d="M9.17496 2.16C8.89996 1.455 8.22996 1 7.47496 1H4.52496C3.76996 1 3.09996 1.455 2.82496 2.16C2.55496 2.87 2.73996 3.655 3.30496 4.165L5.32496 6H6.67996L8.69996 4.165C9.25996 3.655 9.44496 2.87 9.17496 2.16ZM6.90996 3.615H5.08996C4.89996 3.615 4.74996 3.46 4.74996 3.275C4.74996 3.09 4.90496 2.935 5.08996 2.935H6.90996C7.09996 2.935 7.24996 3.09 7.24996 3.275C7.24996 3.46 7.09496 3.615 6.90996 3.615Z" fill="white"></path>
</svg>
</div>
<div>
<p class="text-orange-900 text-xs font-bold font-heading mb-1">Learners Mindset</p>
<p class="text-gray-600 text-xs mb-3">13:00 PM − 13:30 PM (30m)</p>
<div class="inline-block py-1 px-2 rounded-md bg-orange-50 border border-orange-100 text-orange-500 text-xs font-medium mb-4">Producvitity</div>
</div>
</a>
</div>
</div>
<div class="flex flex-col flex-1">
<div class="border-t border-b border-gray-50 py-2 px-24">
<p class="text-center text-gray-500 text-sm font-semibold">Thu</p>
</div>
<div class="flex-1 border-r border-gray-50">
<div class="h-56"></div>
<a class="bg-purple-50 py-3 px-4 flex flex-wrap gap-3 hover:bg-purple-100 transition duration-200" href="#">
<div class="bg-purple-900 w-5 h-5 flex items-center justify-center rounded-md">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
<path d="M9.10984 7.01719L9.10998 7.0172V7.005C9.10998 6.52852 8.73128 6.12664 8.23801 6.125L6.23499 6.10497L6.23499 5.875H7.13999C7.62113 5.875 8.01499 5.48114 8.01499 5C8.01499 4.51886 7.62113 4.125 7.13999 4.125H6.23499V3.875H8.23498C8.71613 3.875 9.10998 3.48114 9.10998 3C9.10998 2.51886 8.71613 2.125 8.23498 2.125H6.35213C6.53249 1.74626 6.88444 1.5 7.23499 1.5H9.23498C9.78493 1.5 10.235 1.94723 10.235 2.5V9.5C10.235 10.0528 9.78493 10.5 9.23498 10.5H7.23499C6.88444 10.5 6.53249 10.2537 6.35213 9.875H7.68499C8.17546 9.875 8.55999 9.47679 8.55999 9C8.55999 8.52321 8.17546 8.125 7.68499 8.125H6.23499V7.85503L8.22497 7.87497L8.22497 7.875H8.22998H8.22999H8.22999H8.23H8.23H8.23H8.23001H8.23001H8.23002H8.23002H8.23002H8.23003H8.23003H8.23004H8.23004H8.23004H8.23005H8.23005H8.23006H8.23006H8.23007H8.23007H8.23007H8.23008H8.23008H8.23009H8.23009H8.2301H8.2301H8.23011H8.23011H8.23012H8.23012H8.23013H8.23013H8.23014H8.23014H8.23015H8.23016H8.23016H8.23017H8.23017H8.23018H8.23018H8.23019H8.2302H8.2302H8.23021H8.23021H8.23021H8.23022H8.23022H8.23022H8.23023H8.23023H8.23024H8.23024H8.23024H8.23025H8.23025H8.23026H8.23026H8.23027H8.23027H8.23027H8.23028H8.23028H8.23029H8.23029H8.2303H8.2303H8.23031H8.23031H8.23032H8.23032H8.23032H8.23033H8.23033H8.23034H8.23034H8.23035H8.23036H8.23036H8.23037H8.23037H8.23038H8.23038H8.23039H8.23039H8.2304H8.2304H8.23041H8.23041H8.23042H8.23043H8.23043H8.23044H8.23044H8.23045H8.23046H8.23046H8.23047H8.23047H8.23048H8.23049H8.23049H8.2305H8.23051H8.23051H8.23052H8.23053H8.23053H8.23054H8.23055H8.23055H8.23056H8.23057H8.23057H8.23058H8.23059H8.2306H8.2306H8.23061H8.23062H8.23062H8.23063H8.23064H8.23065H8.23065H8.23066H8.23067H8.23068H8.23069H8.23069H8.2307H8.23071H8.23072H8.23073H8.23073H8.23074H8.23075H8.23076H8.23077H8.23078H8.23079H8.23079H8.2308H8.23081H8.23082H8.23083H8.23084H8.23085H8.23086H8.23087H8.23087H8.23088H8.23089H8.2309H8.23091H8.23092H8.23093H8.23094H8.23095H8.23096H8.23097H8.23098H8.23099H8.231H8.23101H8.23102H8.23103H8.23104H8.23105H8.23106H8.23107H8.23108H8.23109H8.23111H8.23112H8.23113H8.23114H8.23115H8.23116H8.23117H8.23118H8.23119H8.23121H8.23122H8.23123H8.23124H8.23125H8.23126H8.23128H8.23129H8.2313H8.23131H8.23132H8.23134H8.23135H8.23136H8.23137H8.23139H8.2314H8.23141H8.23142H8.23144H8.23145H8.23146H8.23148H8.23149H8.2315H8.23151H8.23153H8.23154H8.23155H8.23157H8.23158H8.2316H8.23161H8.23162H8.23164H8.23165H8.23167H8.23168H8.23169H8.23171H8.23172H8.23174H8.23175H8.23177H8.23178H8.2318H8.23181H8.23183H8.23184H8.23186H8.23187H8.23189H8.2319H8.23192H8.23193H8.23195H8.23197H8.23198H8.232H8.23201H8.23203H8.23205H8.23206H8.23208H8.23209H8.23211H8.23213H8.23214H8.23216H8.23218H8.23219H8.23221H8.23223H8.23225H8.23226H8.23228H8.2323H8.23232H8.23233H8.23235H8.23237H8.23239H8.2324H8.23242H8.23244H8.23246H8.23248H8.2325H8.23252H8.23253H8.23255H8.23257H8.23259H8.23261H8.23263H8.23265H8.23267H8.23269H8.23271H8.23273H8.23274H8.23276H8.23278H8.2328H8.23282H8.23284H8.23286H8.23289H8.23291H8.23293H8.23295H8.23297H8.23299H8.23301H8.23303H8.23305H8.23307H8.23309H8.23312H8.23314H8.23316H8.23318H8.2332H8.23322H8.23325H8.23327H8.23329H8.23331H8.23333H8.23336H8.23338H8.2334H8.23342H8.23345H8.23347H8.23349H8.23352H8.23354H8.23356H8.23359H8.23361H8.23363H8.23366H8.23368H8.23371H8.23373H8.23375H8.23378H8.2338H8.23383H8.23385H8.23388H8.2339H8.23393H8.23395H8.23398H8.234H8.23403H8.23405H8.23408H8.2341H8.23413H8.23416H8.23418H8.23421H8.23423H8.23426H8.23429H8.23431H8.23434H8.23437H8.23439H8.23442H8.23445H8.23448H8.2345H8.23453H8.23456H8.23459H8.23461H8.23464H8.23467H8.2347H8.23473H8.23475H8.23478H8.23481H8.23484H8.23487H8.2349H8.23493H8.23496H8.23498C8.71838 7.875 9.09839 7.48645 9.10984 7.01719Z" fill="white" stroke="white"></path>
<path d="M4.22001 2.475V2.625C4.22001 2.90114 3.99616 3.125 3.72001 3.125H1.76501C1.48887 3.125 1.26501 2.90114 1.26501 2.625V2.475C1.26501 1.665 1.93001 1 2.74501 1C3.55501 1 4.22001 1.665 4.22001 2.475Z" fill="white"></path>
<path d="M1.26501 8.955C1.26501 9.18 1.36001 9.525 1.48001 9.715L1.88501 10.395C2.36001 11.185 3.13001 11.185 3.60001 10.395L4.01002 9.715C4.12502 9.525 4.22001 9.18 4.22001 8.955V4.375C4.22001 4.09886 3.99616 3.875 3.72001 3.875H1.76501C1.48887 3.875 1.26501 4.09886 1.26501 4.375V8.955Z" fill="white"></path>
</svg>
</div>
<div>
<p class="text-purple-900 text-xs font-bold font-heading mb-1">Journaling</p>
<p class="text-gray-600 text-xs mb-3">16:00 PM − 16:30 PM (30m)</p>
<div class="inline-block py-1 px-2 rounded-md bg-purple-50 border border-purple-200 text-purple-500 text-xs font-medium mb-4">Wellness</div>
</div>
</a>
</div>
</div>
<div class="flex flex-col flex-1">
<div class="border-t border-b border-gray-50 py-2 px-24">
<p class="text-center text-gray-500 text-sm font-semibold">Fri</p>
</div>
<div class="h-12"></div>
<a class="py-3 px-4 flex flex-wrap gap-3 border-b border-t border-r border-gray-50 hover:bg-gray-50 transition duration-200" href="#">
<div class="bg-gray-400 w-5 h-5 flex items-center justify-center rounded-md">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
<path d="M8.35879 8.2051L8.35996 8.20616C8.77017 8.57643 8.9041 9.14137 8.70399 9.65877C8.50383 10.1713 8.02404 10.5 7.46999 10.5H4.52499C3.97517 10.5 3.49091 10.1706 3.29102 9.65885C3.09086 9.14143 3.22479 8.57645 3.63502 8.20616L3.63502 8.20616L3.63619 8.20509L5.51319 6.5H6.48179L8.35879 8.2051ZM5.08999 9.57H6.90999C7.37113 9.57 7.74999 9.19114 7.74999 8.73C7.74999 8.27365 7.3809 7.89 6.90999 7.89H5.08999C4.62885 7.89 4.24999 8.26886 4.24999 8.73C4.24999 9.18634 4.61907 9.57 5.08999 9.57Z" fill="white" stroke="white"></path>
<path d="M9.17499 2.16C8.89999 1.455 8.22999 1 7.47499 1H4.52499C3.76999 1 3.09999 1.455 2.82499 2.16C2.55499 2.87 2.73999 3.655 3.30499 4.165L5.32499 6H6.67999L8.69999 4.165C9.25999 3.655 9.44499 2.87 9.17499 2.16ZM6.90999 3.615H5.08999C4.89999 3.615 4.74999 3.46 4.74999 3.275C4.74999 3.09 4.90499 2.935 5.08999 2.935H6.90999C7.09999 2.935 7.24999 3.09 7.24999 3.275C7.24999 3.46 7.09499 3.615 6.90999 3.615Z" fill="white"></path>
</svg>
</div>
<div>
<p class="text-xs font-bold font-heading mb-1">Learning Through Collaborative Digital Cohorts</p>
<p class="text-gray-500 text-xs mb-3">13:00 PM − 14:00 PM (1h)</p>
<div class="inline-block py-1 px-2 rounded-md bg-white border border-gray-100 text-gray-700 text-xs font-medium mb-4">Producvitity</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="max-w-6xl mx-auto p-8 rounded-3xl border border-orange-500 bg-white flex items-center justify-between flex-wrap gap-4">
<div>
<h2 class="text-lg font-bold font-heading mb-2">How I join the events?</h2>
<p class="text-gray-600 max-w-2xl">By signing up you can join the upcoming events, and access the past events. Some exclusive events are available for Pro subscription members.</p>
</div>
<a class="w-full sm:w-auto text-center h-12 inline-flex items-center justify-center py-3 px-5 rounded-full bg-orange-500 border border-orange-600 shadow font-bold font-heading text-white hover:bg-orange-600 focus:ring focus:ring-orange-200 transition duration-200" href="#">Sign up now</a>
</div>
</div>
</section>
Can't find the right component?
Describe it and Shuffle AI builds it in seconds, ready to edit and export.
Free to start
Generate with AI
