Menu
Event 37
<section id="relume" class="px-[5%] py-16 md:py-24 lg:py-28">
<div class="container">
<div class="mb-12 max-w-lg md:mb-18 lg:mb-20">
<p class="mb-3 font-semibold md:mb-4">Tagline</p>
<h1 class="mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl">Schedule</h1>
<p class="md:text-md">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros
elementum tristique.
</p>
</div>
<div dir="ltr" data-orientation="horizontal" class="flex flex-col justify-start">
<div
role="tablist"
aria-orientation="horizontal"
class="no-scrollbar mb-12 ml-[-5vw] flex w-screen items-center overflow-auto pl-[5vw] md:ml-0 md:w-full md:overflow-hidden md:pl-0"
tabindex="-1"
data-orientation="horizontal"
style="outline: none"
>
<button
type="button"
role="tab"
aria-selected="true"
aria-controls="radix-:R2:-content-fri-09-feb"
data-state="active"
id="radix-:R2:-trigger-fri-09-feb"
class="inline-flex items-center justify-center whitespace-nowrap border border-border-primary bg-background-primary py-2 text-text-primary transition-all focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 px-4 data-[state=active]:border data-[state=active]:border-border-primary data-[state=inactive]:border-transparent data-[state=active]:bg-transparent data-[state=active]:text-neutral-black"
tabindex="-1"
data-orientation="horizontal"
data-radix-collection-item=""
>
Fri 09 Feb</button
><button
type="button"
role="tab"
aria-selected="false"
aria-controls="radix-:R2:-content-sat-10-feb"
data-state="inactive"
id="radix-:R2:-trigger-sat-10-feb"
class="inline-flex items-center justify-center whitespace-nowrap border border-border-primary bg-background-primary py-2 text-text-primary transition-all focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 px-4 data-[state=active]:border data-[state=active]:border-border-primary data-[state=inactive]:border-transparent data-[state=active]:bg-transparent data-[state=active]:text-neutral-black"
tabindex="-1"
data-orientation="horizontal"
data-radix-collection-item=""
>
Sat 10 Feb</button
><button
type="button"
role="tab"
aria-selected="false"
aria-controls="radix-:R2:-content-sun-11-feb"
data-state="inactive"
id="radix-:R2:-trigger-sun-11-feb"
class="inline-flex items-center justify-center whitespace-nowrap border border-border-primary bg-background-primary py-2 text-text-primary transition-all focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 px-4 data-[state=active]:border data-[state=active]:border-border-primary data-[state=inactive]:border-transparent data-[state=active]:bg-transparent data-[state=active]:text-neutral-black"
tabindex="-1"
data-orientation="horizontal"
data-radix-collection-item=""
>
Sun 11 Feb
</button>
</div>
<div
data-state="active"
data-orientation="horizontal"
role="tabpanel"
aria-labelledby="radix-:R2:-trigger-fri-09-feb"
id="radix-:R2:-content-fri-09-feb"
tabindex="0"
class="focus-visible:outline-none data-[state=active]:animate-tabs"
style="animation-duration: 0s"
>
<div class="flex flex-col gap-y-6 md:gap-y-8">
<div class="grid auto-cols-fr items-center border border-border-primary lg:grid-cols-2">
<a href="#" class="relative block aspect-video size-full lg:aspect-auto"
><img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
alt="Relume placeholder image 1"
class="absolute size-full object-cover"
/>
<div
class="absolute left-6 top-6 flex items-center bg-background-secondary px-2 py-1 text-sm font-semibold md:left-8 md:top-8"
>
<div class="flex items-center gap-2">
<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
class="size-6 flex-none"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 14c2.206 0 4-1.794 4-4s-1.794-4-4-4-4 1.794-4 4 1.794 4 4 4zm0-6c1.103 0 2 .897 2 2s-.897 2-2 2-2-.897-2-2 .897-2 2-2z"
></path>
<path
d="M11.42 21.814a.998.998 0 0 0 1.16 0C12.884 21.599 20.029 16.44 20 10c0-4.411-3.589-8-8-8S4 5.589 4 9.995c-.029 6.445 7.116 11.604 7.42 11.819zM12 4c3.309 0 6 2.691 6 6.005.021 4.438-4.388 8.423-6 9.73-1.611-1.308-6.021-5.294-6-9.735 0-3.309 2.691-6 6-6z"
></path></svg
><span>Location</span>
</div>
</div></a
>
<div class="p-6 md:p-8">
<div class="text-md md:text-lg">
8:00 am<!-- -->
-
<!-- -->9:00 am
</div>
<div class="mt-5 text-xl font-bold md:mt-6 md:text-2xl">Event title heading</div>
<div class="mt-5 md:mt-6">
<div class="font-semibold">Speaker</div>
<div class="mt-2">Full name</div>
</div>
<div class="mt-5 md:mt-6">
<div class="font-semibold">Details</div>
<div class="mt-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim
in eros elementum tristique.
</div>
</div>
<a
href="#"
class="focus-visible:ring-border-primary inline-flex gap-3 items-center justify-center whitespace-nowrap ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-border-primary text-text-primary bg-background-primary px-6 py-3 mt-5 md:mt-6 w-full"
title="View details"
>View details</a
>
</div>
</div>
<div class="grid auto-cols-fr items-center border border-border-primary lg:grid-cols-2">
<a href="#" class="relative block aspect-video size-full lg:aspect-auto"
><img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
alt="Relume placeholder image 2"
class="absolute size-full object-cover"
/>
<div
class="absolute left-6 top-6 flex items-center bg-background-secondary px-2 py-1 text-sm font-semibold md:left-8 md:top-8"
>
<div class="flex items-center gap-2">
<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
class="size-6 flex-none"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 14c2.206 0 4-1.794 4-4s-1.794-4-4-4-4 1.794-4 4 1.794 4 4 4zm0-6c1.103 0 2 .897 2 2s-.897 2-2 2-2-.897-2-2 .897-2 2-2z"
></path>
<path
d="M11.42 21.814a.998.998 0 0 0 1.16 0C12.884 21.599 20.029 16.44 20 10c0-4.411-3.589-8-8-8S4 5.589 4 9.995c-.029 6.445 7.116 11.604 7.42 11.819zM12 4c3.309 0 6 2.691 6 6.005.021 4.438-4.388 8.423-6 9.73-1.611-1.308-6.021-5.294-6-9.735 0-3.309 2.691-6 6-6z"
></path></svg
><span>Location</span>
</div>
</div></a
>
<div class="p-6 md:p-8">
<div class="text-md md:text-lg">
9:00 am<!-- -->
-
<!-- -->10:00 am
</div>
<div class="mt-5 text-xl font-bold md:mt-6 md:text-2xl">Event title heading</div>
<div class="mt-5 md:mt-6">
<div class="font-semibold">Speaker</div>
<div class="mt-2">Full name</div>
</div>
<div class="mt-5 md:mt-6">
<div class="font-semibold">Details</div>
<div class="mt-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim
in eros elementum tristique.
</div>
</div>
<a
href="#"
class="focus-visible:ring-border-primary inline-flex gap-3 items-center justify-center whitespace-nowrap ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-border-primary text-text-primary bg-background-primary px-6 py-3 mt-5 md:mt-6 w-full"
title="View details"
>View details</a
>
</div>
</div>
<div class="grid auto-cols-fr items-center border border-border-primary lg:grid-cols-2">
<a href="#" class="relative block aspect-video size-full lg:aspect-auto"
><img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
alt="Relume placeholder image 3"
class="absolute size-full object-cover"
/>
<div
class="absolute left-6 top-6 flex items-center bg-background-secondary px-2 py-1 text-sm font-semibold md:left-8 md:top-8"
>
<div class="flex items-center gap-2">
<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
class="size-6 flex-none"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 14c2.206 0 4-1.794 4-4s-1.794-4-4-4-4 1.794-4 4 1.794 4 4 4zm0-6c1.103 0 2 .897 2 2s-.897 2-2 2-2-.897-2-2 .897-2 2-2z"
></path>
<path
d="M11.42 21.814a.998.998 0 0 0 1.16 0C12.884 21.599 20.029 16.44 20 10c0-4.411-3.589-8-8-8S4 5.589 4 9.995c-.029 6.445 7.116 11.604 7.42 11.819zM12 4c3.309 0 6 2.691 6 6.005.021 4.438-4.388 8.423-6 9.73-1.611-1.308-6.021-5.294-6-9.735 0-3.309 2.691-6 6-6z"
></path></svg
><span>Location</span>
</div>
</div></a
>
<div class="p-6 md:p-8">
<div class="text-md md:text-lg">
10:00 am<!-- -->
-
<!-- -->11:00 am
</div>
<div class="mt-5 text-xl font-bold md:mt-6 md:text-2xl">Event title heading</div>
<div class="mt-5 md:mt-6">
<div class="font-semibold">Speaker</div>
<div class="mt-2">Full name</div>
</div>
<div class="mt-5 md:mt-6">
<div class="font-semibold">Details</div>
<div class="mt-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim
in eros elementum tristique.
</div>
</div>
<a
href="#"
class="focus-visible:ring-border-primary inline-flex gap-3 items-center justify-center whitespace-nowrap ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-border-primary text-text-primary bg-background-primary px-6 py-3 mt-5 md:mt-6 w-full"
title="View details"
>View details</a
>
</div>
</div>
</div>
</div>
<div
data-state="inactive"
data-orientation="horizontal"
role="tabpanel"
aria-labelledby="radix-:R2:-trigger-sat-10-feb"
hidden=""
id="radix-:R2:-content-sat-10-feb"
tabindex="0"
class="focus-visible:outline-none data-[state=active]:animate-tabs"
></div>
<div
data-state="inactive"
data-orientation="horizontal"
role="tabpanel"
aria-labelledby="radix-:R2:-trigger-sun-11-feb"
hidden=""
id="radix-:R2:-content-sun-11-feb"
tabindex="0"
class="focus-visible:outline-none data-[state=active]:animate-tabs"
></div>
</div>
</div>
</section>
import { Button, Tabs, TabsContent, TabsList, TabsTrigger } from "@relume_io/relume-ui";
import type { ButtonProps } from "@relume_io/relume-ui";
import { BiMap } from "react-icons/bi";
type ImageProps = {
src: string;
alt?: string;
};
type EventTime = {
start: string;
end: string;
};
type ScheduledEvent = {
url: string;
eventTime: EventTime;
title: string;
speaker: string;
description: string;
button: ButtonProps;
image: ImageProps;
location: string;
};
type Tab = {
value: string;
trigger: string;
content: ScheduledEvent[];
};
type Props = {
tagline: string;
heading: string;
description: string;
tabs: Tab[];
};
export type Event37Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
export const Event37 = (props: Event37Props) => {
const { tagline, heading, description, tabs } = {
...Event37Defaults,
...props,
};
return (
<section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28">
<div className="container">
<div className="mb-12 max-w-lg md:mb-18 lg:mb-20">
<p className="mb-3 font-semibold md:mb-4">{tagline}</p>
<h1 className="mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl">{heading}</h1>
<p className="md:text-md">{description}</p>
</div>
<Tabs defaultValue={tabs[0].value} className="flex flex-col justify-start">
<TabsList className="no-scrollbar mb-12 ml-[-5vw] flex w-screen items-center overflow-auto pl-[5vw] md:ml-0 md:w-full md:overflow-hidden md:pl-0">
{tabs.map((tab, index) => (
<TabsTrigger
key={index}
value={tab.value}
className="px-4 data-[state=active]:border data-[state=active]:border-border-primary data-[state=inactive]:border-transparent data-[state=active]:bg-transparent data-[state=active]:text-neutral-black"
>
{tab.trigger}
</TabsTrigger>
))}
</TabsList>
{tabs.map((tab) => (
<TabsContent
key={tab.value}
value={tab.value}
className="data-[state=active]:animate-tabs"
>
<div className="flex flex-col gap-y-6 md:gap-y-8">
{tab.content.map((event, index) => (
<ScheduledEvent key={index} {...event} />
))}
</div>
</TabsContent>
))}
</Tabs>
</div>
</section>
);
};
const ScheduledEvent: React.FC<ScheduledEvent> = ({
url,
eventTime,
title,
speaker,
description,
button,
image,
location,
}) => {
return (
<div className="grid auto-cols-fr items-center border border-border-primary lg:grid-cols-2">
<a href={url} className="relative block aspect-video size-full lg:aspect-auto">
<img src={image.src} alt={image.alt} className="absolute size-full object-cover" />
<div className="absolute left-6 top-6 flex items-center bg-background-secondary px-2 py-1 text-sm font-semibold md:left-8 md:top-8">
<div className="flex items-center gap-2 ">
<BiMap className="size-6 flex-none" />
<span>{location}</span>
</div>
</div>
</a>
<div className="p-6 md:p-8">
<div className="text-md md:text-lg">
{eventTime.start} - {eventTime.end}
</div>
<div className="mt-5 text-xl font-bold md:mt-6 md:text-2xl">{title}</div>
<div className="mt-5 md:mt-6">
<div className="font-semibold">Speaker</div>
<div className="mt-2">{speaker}</div>
</div>
<div className="mt-5 md:mt-6">
<div className="font-semibold">Details</div>
<div className="mt-2">{description}</div>
</div>
<Button {...button} className="mt-5 md:mt-6" asChild>
<a href={url} className="w-full">
{button.title}
</a>
</Button>
</div>
</div>
);
};
export const Event37Defaults: Props = {
tagline: "Tagline",
heading: "Schedule",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
tabs: [
{
value: "fri-09-feb",
trigger: "Fri 09 Feb",
content: [
{
url: "#",
eventTime: {
start: "8:00 am",
end: "9:00 am",
},
title: "Event title heading",
speaker: "Full name",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
button: {
variant: "secondary",
size: "primary",
title: "View details",
},
image: {
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
alt: "Relume placeholder image 1",
},
location: "Location",
},
{
url: "#",
eventTime: {
start: "9:00 am",
end: "10:00 am",
},
title: "Event title heading",
speaker: "Full name",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
button: {
variant: "secondary",
size: "primary",
title: "View details",
},
image: {
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
alt: "Relume placeholder image 2",
},
location: "Location",
},
{
url: "#",
eventTime: {
start: "10:00 am",
end: "11:00 am",
},
title: "Event title heading",
speaker: "Full name",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
button: {
variant: "secondary",
size: "primary",
title: "View details",
},
image: {
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
alt: "Relume placeholder image 3",
},
location: "Location",
},
],
},
{
value: "sat-10-feb",
trigger: "Sat 10 Feb",
content: [
{
url: "#",
eventTime: {
start: "8:00 am",
end: "9:00 am",
},
title: "Event title heading",
speaker: "Full name",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
button: {
variant: "secondary",
size: "primary",
title: "View details",
},
image: {
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
alt: "Relume placeholder image 4",
},
location: "Location",
},
{
url: "#",
eventTime: {
start: "9:00 am",
end: "10:00 am",
},
title: "Event title heading",
speaker: "Full name",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
button: {
variant: "secondary",
size: "primary",
title: "View details",
},
image: {
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
alt: "Relume placeholder image 5",
},
location: "Location",
},
{
url: "#",
eventTime: {
start: "10:00 am",
end: "11:00 am",
},
title: "Event title heading",
speaker: "Full name",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
button: {
variant: "secondary",
size: "primary",
title: "View details",
},
image: {
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
alt: "Relume placeholder image 6",
},
location: "Location",
},
],
},
{
value: "sun-11-feb",
trigger: "Sun 11 Feb",
content: [
{
url: "#",
eventTime: {
start: "8:00 am",
end: "9:00 am",
},
title: "Event title heading",
speaker: "Full name",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
button: {
variant: "secondary",
size: "primary",
title: "View details",
},
image: {
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
alt: "Relume placeholder image 7",
},
location: "Location",
},
{
url: "#",
eventTime: {
start: "9:00 am",
end: "10:00 am",
},
title: "Event title heading",
speaker: "Full name",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
button: {
variant: "secondary",
size: "primary",
title: "View details",
},
image: {
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
alt: "Relume placeholder image 8",
},
location: "Location",
},
{
url: "#",
eventTime: {
start: "10:00 am",
end: "11:00 am",
},
title: "Event title heading",
speaker: "Full name",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
button: {
variant: "secondary",
size: "primary",
title: "View details",
},
image: {
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
alt: "Relume placeholder image 9",
},
location: "Location",
},
],
},
],
};
.svg)
.svg)
Need help?
For installation guidelines and API information, visit the docs.
Examples
No items found.
.avif)
.avif)
.avif)
.webp)
.webp)
.webp)
