Events UI Components – Solstice Library

<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">

<section class="py-12 py-md-16 py-lg-24">
  <div class="container">
    <div class="mw-sm mw-lg-lg mb-16">
      <span class="badge mb-4 bg-primary-light text-primary border border-info">Events</span>
      <h3 class="font-heading mb-0">Engage in our weekly online events</h3>
    </div>
    <div class="overflow-scroll pb-2 mb-12">
      <div style="min-width: max-content;">
        <div class="position-relative p-6 border border-light rounded-3 mw-6xl mx-auto overflow-hidden" style="height: 524px;">
          <div class="position-absolute bottom-0 start-0 w-100 py-14" 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="d-flex mb-4 flex-wrap align-items-center justify-content-between">
            <div>
              <select class="form-select ps-1 py-1 pe-9 border-0 fw-bold" name="" id="">
                <option value="1">August 2023</option>
                <option value="2">July 2023</option>
                <option value="3">June 2023</option>
              </select>
            </div>
            <div class="d-flex flex-wrap align-items-center">
              <span class="d-inline-block py-3 px-4 me-2 small fw-semibold lh-1 border border-light rounded-pill shadow">Today</span>
              <button class="btn btn-outline-light p-0 me-2 shadow d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <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>