Loading...
Back

#Webinar Grid

showcase

Showcases upcoming or past webinars in a grid layout, each with event details and a link.

Up-Coming Webinar 

<section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
      <h4 class="text-xl font-bold capitalize lg:text-2xl">
        Up-Coming Webinar
      </h4>
      <div class="mt-4 grid gap-4 lg:mt-8 lg:grid-cols-3">
        <div>
          <div
            class="relative rounded-lg bg-gray-200 p-4"
            style="
              padding-top: 60%;
              background: url('https://placehold.co/600x400');
              background-size: cover;
            "
          >
            <p
              class="absolute left-4 top-4 flex h-6 items-center rounded border-2 border-black px-1 text-xs font-bold"
            >
              Latest
            </p>
          </div>
          <p class="mb-1 mt-2 text-sm">Thursday, March 28</p>
          <a href="#" class="font-bold hover:underline lg:text-lg">
            Navigate the Entrepreneurial Rollercoaster: Shift from Struggle to
            Success</a
          >
        </div>
        <div>
          <div
            class="relative rounded-lg bg-gray-200 p-4"
            style="
              padding-top: 60%;
              background: url('https://placehold.co/600x400');
              background-size: cover;
            "
          >
            <p
              class="absolute left-4 top-4 flex h-6 items-center rounded border-2 border-black px-1 text-xs font-bold"
            >
              Latest
            </p>
          </div>
          <p class="mb-1 mt-2 text-sm">Friday, April 5</p>
          <a href="#" class="font-bold hover:underline lg:text-lg">
            Tech Tea Time: Business Networking for AI Enthusiasts</a
          >
        </div>
        <div>
          <div
            class="relative rounded-lg bg-gray-200 p-4"
            style="
              padding-top: 60%;
              background: url('https://placehold.co/600x400');
              background-size: cover;
            "
          >
            <p
              class="absolute left-4 top-4 flex h-6 items-center rounded border-2 border-black px-1 text-xs font-bold"
            >
              Latest
            </p>
          </div>
          <p class="mb-1 mt-2 text-sm">Saturday, March 30</p>
          <a href="#" class="font-bold hover:underline lg:text-lg">
            The Financial Investment Expo 2024（Kuala Lunpur）</a
          >
        </div>
      </div>
    </section>

Up-Coming Webinar 

<section layout="container" space="m-x:auto m-y:large p-x:medium-3x tw-lg:m-y:big-3x tw-lg:p-x:big-3x">
      <h4 visual="text-size:big font:tw-bold capitalize tw-lg:text-size:huge">
        Up-Coming Webinar
      </h4>
      <div layout="grid tw-lg:grid-cols:3" space="m-t:medium g:medium tw-lg:m-t:large">
        <div>
          <div
            layout="relative" space="p:medium" visual="rounded:medium bg:gray-200"
            style="
              padding-top: 60%;
              background: url('https://placehold.co/600x400');
              background-size: cover;
            "
          >
            <p
              layout="absolute left:medium top:medium flex items:center" space="h:medium-3x p-x:tiny" visual="rounded:small border-w:regular border:black text-size:mini font:tw-bold"
            >
              Latest
            </p>
          </div>
          <p space="m-b:tiny m-t:small" visual="text-size:small">Thursday, March 28</p>
          <a href="#" visual="font:tw-bold hover:underline tw-lg:text-size:large">
            Navigate the Entrepreneurial Rollercoaster: Shift from Struggle to
            Success</a
          >
        </div>
        <div>
          <div
            layout="relative" space="p:medium" visual="rounded:medium bg:gray-200"
            style="
              padding-top: 60%;
              background: url('https://placehold.co/600x400');
              background-size: cover;
            "
          >
            <p
              layout="absolute left:medium top:medium flex items:center" space="h:medium-3x p-x:tiny" visual="rounded:small border-w:regular border:black text-size:mini font:tw-bold"
            >
              Latest
            </p>
          </div>
          <p space="m-b:tiny m-t:small" visual="text-size:small">Friday, April 5</p>
          <a href="#" visual="font:tw-bold hover:underline tw-lg:text-size:large">
            Tech Tea Time: Business Networking for AI Enthusiasts</a
          >
        </div>
        <div>
          <div
            layout="relative" space="p:medium" visual="rounded:medium bg:gray-200"
            style="
              padding-top: 60%;
              background: url('https://placehold.co/600x400');
              background-size: cover;
            "
          >
            <p
              layout="absolute left:medium top:medium flex items:center" space="h:medium-3x p-x:tiny" visual="rounded:small border-w:regular border:black text-size:mini font:tw-bold"
            >
              Latest
            </p>
          </div>
          <p space="m-b:tiny m-t:small" visual="text-size:small">Saturday, March 30</p>
          <a href="#" visual="font:tw-bold hover:underline tw-lg:text-size:large">
            The Financial Investment Expo 2024（Kuala Lunpur）</a
          >
        </div>
      </div>
    </section>