Menu
Event 4
<section id="relume" class="px-[5%] py-16 md:py-24 lg:py-28">
<div class="container">
<div class="mx-auto flex w-full max-w-lg flex-col">
<div class="mb-12 text-center md:mb-18 lg:mb-20">
<h4 class="font-semibold">Tagline</h4>
<h1 class="mt-3 text-5xl font-bold md:mt-4 md:text-7xl lg:text-8xl">Events</h1>
<p class="mt-5 text-base md:mt-6 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 flex w-full items-center overflow-auto md:justify-center md:overflow-hidden"
tabindex="-1"
data-orientation="horizontal"
style="outline: none"
>
<button
type="button"
role="tab"
aria-selected="true"
aria-controls="radix-:R2:-content-view-all"
data-state="active"
id="radix-:R2:-trigger-view-all"
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=""
>
View all</button
><button
type="button"
role="tab"
aria-selected="false"
aria-controls="radix-:R2:-content-category-one"
data-state="inactive"
id="radix-:R2:-trigger-category-one"
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=""
>
Category one</button
><button
type="button"
role="tab"
aria-selected="false"
aria-controls="radix-:R2:-content-category-two"
data-state="inactive"
id="radix-:R2:-trigger-category-two"
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=""
>
Category two</button
><button
type="button"
role="tab"
aria-selected="false"
aria-controls="radix-:R2:-content-category-three"
data-state="inactive"
id="radix-:R2:-trigger-category-three"
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=""
>
Category three</button
><button
type="button"
role="tab"
aria-selected="false"
aria-controls="radix-:R2:-content-category-four"
data-state="inactive"
id="radix-:R2:-trigger-category-four"
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=""
>
Category four
</button>
</div>
<div
data-state="active"
data-orientation="horizontal"
role="tabpanel"
aria-labelledby="radix-:R2:-trigger-view-all"
id="radix-:R2:-content-view-all"
tabindex="0"
class="focus-visible:outline-none data-[state=active]:animate-tabs"
style="animation-duration: 0s"
>
<div class="flex flex-col gap-6 md:gap-8">
<div class="flex flex-col border border-border-primary md:flex-row">
<div
class="relative aspect-[3/2] w-full shrink-0 md:aspect-auto md:w-48 lg:aspect-square"
>
<img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
alt="Relume placeholder image 1"
class="absolute size-full object-cover"
/>
</div>
<div
class="flex w-full flex-col items-start gap-8 p-6 sm:p-8 lg:flex-row lg:items-center"
>
<div>
<div class="mb-2 flex flex-wrap items-center gap-2 sm:mb-0 sm:gap-4">
<a href="#"
><h2 class="text-xl font-bold md:text-2xl">Event title heading</h2></a
>
<p class="bg-background-secondary px-2 py-1 text-sm font-semibold">Sold out</p>
</div>
<div class="mb-3 flex items-center text-sm md:mb-4">
<span
>Fri<!-- -->
<!-- -->09<!-- -->
<!-- -->Feb<!-- -->
<!-- -->2024</span
><span class="mx-2 text-base">•</span><span>Location</span>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim
in eros elementum tristique.
</p>
</div>
<button
class="focus-visible:ring-border-primary gap-3 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-5 py-2 flex items-center justify-center gap-x-2"
title="Save my spot"
>
Save my spot
</button>
</div>
</div>
<div class="flex flex-col border border-border-primary md:flex-row">
<div
class="relative aspect-[3/2] w-full shrink-0 md:aspect-auto md:w-48 lg:aspect-square"
>
<img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
alt="Relume placeholder image 1"
class="absolute size-full object-cover"
/>
</div>
<div
class="flex w-full flex-col items-start gap-8 p-6 sm:p-8 lg:flex-row lg:items-center"
>
<div>
<div class="mb-2 flex flex-wrap items-center gap-2 sm:mb-0 sm:gap-4">
<a href="#"
><h2 class="text-xl font-bold md:text-2xl">Event title heading</h2></a
>
</div>
<div class="mb-3 flex items-center text-sm md:mb-4">
<span
>Sat<!-- -->
<!-- -->10<!-- -->
<!-- -->Feb<!-- -->
<!-- -->2024</span
><span class="mx-2 text-base">•</span><span>Location</span>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim
in eros elementum tristique.
</p>
</div>
<button
class="focus-visible:ring-border-primary gap-3 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-5 py-2 flex items-center justify-center gap-x-2"
title="Save my spot"
>
Save my spot
</button>
</div>
</div>
<div class="flex flex-col border border-border-primary md:flex-row">
<div
class="relative aspect-[3/2] w-full shrink-0 md:aspect-auto md:w-48 lg:aspect-square"
>
<img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
alt="Relume placeholder image 1"
class="absolute size-full object-cover"
/>
</div>
<div
class="flex w-full flex-col items-start gap-8 p-6 sm:p-8 lg:flex-row lg:items-center"
>
<div>
<div class="mb-2 flex flex-wrap items-center gap-2 sm:mb-0 sm:gap-4">
<a href="#"
><h2 class="text-xl font-bold md:text-2xl">Event title heading</h2></a
>
</div>
<div class="mb-3 flex items-center text-sm md:mb-4">
<span
>Sun<!-- -->
<!-- -->11<!-- -->
<!-- -->Feb<!-- -->
<!-- -->2024</span
><span class="mx-2 text-base">•</span><span>Location</span>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim
in eros elementum tristique.
</p>
</div>
<button
class="focus-visible:ring-border-primary gap-3 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-5 py-2 flex items-center justify-center gap-x-2"
title="Save my spot"
>
Save my spot
</button>
</div>
</div>
</div>
</div>
<div
data-state="inactive"
data-orientation="horizontal"
role="tabpanel"
aria-labelledby="radix-:R2:-trigger-category-one"
hidden=""
id="radix-:R2:-content-category-one"
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-category-two"
hidden=""
id="radix-:R2:-content-category-two"
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-category-three"
hidden=""
id="radix-:R2:-content-category-three"
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-category-four"
hidden=""
id="radix-:R2:-content-category-four"
tabindex="0"
class="focus-visible:outline-none data-[state=active]:animate-tabs"
></div>
</div>
</div>
</div>
</section>
import { Button, Tabs, TabsContent, TabsList, TabsTrigger } from "@relume_io/relume-ui";
import type { ButtonProps } from "@relume_io/relume-ui";
type ImageProps = {
src: string;
alt?: string;
};
type Date = {
weekday: string;
day: string;
month: string;
year: string;
};
type FeaturedEvent = {
url: string;
image: ImageProps;
date: Date;
title: string;
status: string | null;
location: string;
description: string;
button: ButtonProps;
};
type Tab = {
value: string;
trigger: string;
content: FeaturedEvent[];
};
type Props = {
tagline: string;
heading: string;
description: string;
tabs: Tab[];
};
export type Event4Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
export const Event4 = (props: Event4Props) => {
const { tagline, heading, description, tabs } = {
...Event4Defaults,
...props,
};
return (
<section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28">
<div className="container">
<div className="mx-auto flex w-full max-w-lg flex-col">
<div className="mb-12 text-center md:mb-18 lg:mb-20">
<h4 className="font-semibold">{tagline}</h4>
<h1 className="mt-3 text-5xl font-bold md:mt-4 md:text-7xl lg:text-8xl">{heading}</h1>
<p className="mt-5 text-base md:mt-6 md:text-md">{description}</p>
</div>
<Tabs defaultValue={tabs[0].value} className="flex flex-col justify-start">
<TabsList className="no-scrollbar mb-12 flex w-full items-center overflow-auto md:justify-center md:overflow-hidden">
{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-6 md:gap-8">
{tab.content.map((event, index) => (
<FeaturedEvent key={index} {...event} />
))}
</div>
</TabsContent>
))}
</Tabs>
</div>
</div>
</section>
);
};
const FeaturedEvent: React.FC<FeaturedEvent> = ({
date,
url,
image,
title,
location,
status,
description,
button,
}) => {
return (
<div className="flex flex-col border border-border-primary md:flex-row">
<div className="relative aspect-[3/2] w-full shrink-0 md:aspect-auto md:w-48 lg:aspect-square">
<img src={image.src} alt={image.alt} className="absolute size-full object-cover" />
</div>
<div className="flex w-full flex-col items-start gap-8 p-6 sm:p-8 lg:flex-row lg:items-center">
<div>
<div className="mb-2 flex flex-wrap items-center gap-2 sm:mb-0 sm:gap-4">
<a href={url}>
<h2 className="text-xl font-bold md:text-2xl">{title}</h2>
</a>
{status && (
<p className="bg-background-secondary px-2 py-1 text-sm font-semibold">{status}</p>
)}
</div>
<div className="mb-3 flex items-center text-sm md:mb-4">
<span>
{date.weekday} {date.day} {date.month} {date.year}
</span>
<span className="mx-2 text-base">•</span>
<span>{location}</span>
</div>
<p>{description}</p>
</div>
<Button {...button} className="flex items-center justify-center gap-x-2">
{button.title}
</Button>
</div>
</div>
);
};
export const Event4Defaults: Props = {
tagline: "Tagline",
heading: "Events",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
tabs: [
{
value: "view-all",
trigger: "View all",
content: [
{
url: "#",
image: {
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
alt: "Relume placeholder image 1",
},
date: {
weekday: "Fri",
day: "09",
month: "Feb",
year: "2024",
},
title: "Event title heading",
status: "Sold out",
location: "Location",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
button: {
variant: "secondary",
size: "sm",
title: "Save my spot",
},
},
{
url: "#",
image: {
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
alt: "Relume placeholder image 1",
},
date: {
weekday: "Sat",
day: "10",
month: "Feb",
year: "2024",
},
title: "Event title heading",
status: null,
location: "Location",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
button: {
variant: "secondary",
size: "sm",
title: "Save my spot",
},
},
{
url: "#",
image: {
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
alt: "Relume placeholder image 1",
},
date: {
weekday: "Sun",
day: "11",
month: "Feb",
year: "2024",
},
title: "Event title heading",
status: null,
location: "Location",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
button: {
variant: "secondary",
size: "sm",
title: "Save my spot",
},
},
],
},
{
value: "category-one",
trigger: "Category one",
content: [
{
url: "#",
image: {
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
alt: "Relume placeholder image 1",
},
date: {
weekday: "Fri",
day: "09",
month: "Feb",
year: "2024",
},
title: "Event title heading",
status: "Sold out",
location: "Location",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
button: {
variant: "secondary",
size: "sm",
title: "Save my spot",
},
},
{
url: "#",
image: {
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
alt: "Relume placeholder image 1",
},
date: {
weekday: "Sat",
day: "10",
month: "Feb",
year: "2024",
},
title: "Event title heading",
status: null,
location: "Location",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
button: {
variant: "secondary",
size: "sm",
title: "Save my spot",
},
},
],
},
{
value: "category-two",
trigger: "Category two",
content: [
{
url: "#",
image: {
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
alt: "Relume placeholder image 1",
},
date: {
weekday: "Fri",
day: "09",
month: "Feb",
year: "2024",
},
title: "Event title heading",
status: "Sold out",
location: "Location",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
button: {
variant: "secondary",
size: "sm",
title: "Save my spot",
},
},
{
url: "#",
image: {
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
alt: "Relume placeholder image 1",
},
date: {
weekday: "Sat",
day: "10",
month: "Feb",
year: "2024",
},
title: "Event title heading",
status: null,
location: "Location",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
button: {
variant: "secondary",
size: "sm",
title: "Save my spot",
},
},
],
},
{
value: "category-three",
trigger: "Category three",
content: [
{
url: "#",
image: {
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
alt: "Relume placeholder image 1",
},
date: {
weekday: "Fri",
day: "09",
month: "Feb",
year: "2024",
},
title: "Event title heading",
status: "Sold out",
location: "Location",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
button: {
variant: "secondary",
size: "sm",
title: "Save my spot",
},
},
{
url: "#",
image: {
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
alt: "Relume placeholder image 1",
},
date: {
weekday: "Sat",
day: "10",
month: "Feb",
year: "2024",
},
title: "Event title heading",
status: null,
location: "Location",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
button: {
variant: "secondary",
size: "sm",
title: "Save my spot",
},
},
],
},
{
value: "category-four",
trigger: "Category four",
content: [
{
url: "#",
image: {
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
alt: "Relume placeholder image 1",
},
date: {
weekday: "Fri",
day: "09",
month: "Feb",
year: "2024",
},
title: "Event title heading",
status: "Sold out",
location: "Location",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
button: {
variant: "secondary",
size: "sm",
title: "Save my spot",
},
},
{
url: "#",
image: {
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
alt: "Relume placeholder image 1",
},
date: {
weekday: "Sat",
day: "10",
month: "Feb",
year: "2024",
},
title: "Event title heading",
status: null,
location: "Location",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
button: {
variant: "secondary",
size: "sm",
title: "Save my spot",
},
},
],
},
],
};
.svg)
.svg)
Need help?
For installation guidelines and API information, visit the docs.
Examples
No items found.
.avif)
.avif)
.avif)
.webp)
.webp)
.webp)
