Support
All support for the Relume is provided through Slack. To get assistance, please join our Slack community and send a preview link of your Webflow project along with a description of your problem to one of our experts. We will review your issue and guide you through a solution.

For account-related issues, please contact support@relume.io.
We're performing some maintenance. If you're experiencing any issues please reach out via Slack
Go to Slack
Your payment method has expired. Update your billing details to regain access to premium features.
Manage Billing
Now open!
Vote on new
Relume components
Vote on what components you'd like to see added to our roadmap next month.
Get started

Content 15

<section id="relume" class="px-[5%] py-16 md:py-24 lg:py-28">
  <div class="container">
    <div class="mb-16 md:mb-[5.5rem] lg:mb-24">
      <div class="mx-auto max-w-lg">
        <div class="mb-8 grid grid-cols-2 gap-6 md:mb-10 md:grid-cols-4 md:gap-8 lg:mb-12">
          <div>
            <h3 class="mb-2 text-md font-bold leading-[1.4] md:text-lg md:leading-[1.4]">Label</h3>
            <p>Lorem ipsum</p>
          </div>
          <div>
            <h3 class="mb-2 text-md font-bold leading-[1.4] md:text-lg md:leading-[1.4]">Label</h3>
            <p>Lorem ipsum</p>
          </div>
          <div>
            <h3 class="mb-2 text-md font-bold leading-[1.4] md:text-lg md:leading-[1.4]">Label</h3>
            <p>Lorem ipsum</p>
          </div>
          <div>
            <h3 class="mb-2 text-md font-bold leading-[1.4] md:text-lg md:leading-[1.4]">Label</h3>
            <p>Lorem ipsum</p>
          </div>
        </div>
        <div>
          <div class="prose">
            <p>
              Morbi sed imperdiet in ipsum, adipiscing elit dui lectus. Tellus id scelerisque est
              ultricies ultricies. Duis est sit sed leo nisl, blandit elit sagittis. Quisque
              tristique consequat quam sed. Nisl at scelerisque amet nulla purus habitasse.
            </p>
            <p>
              Nunc sed faucibus bibendum feugiat sed interdum. Ipsum egestas condimentum mi massa.
              In tincidunt pharetra consectetur sed duis facilisis metus. Etiam egestas in nec sed
              et. Quis lobortis at sit dictum eget nibh tortor commodo cursus.
            </p>
            <p>
              Odio felis sagittis, morbi feugiat tortor vitae feugiat fusce aliquet. Nam elementum
              urna nisi aliquet erat dolor enim. Ornare id morbi eget ipsum. Aliquam senectus neque
              ut id eget consectetur dictum. Donec posuere pharetra odio consequat scelerisque et,
              nunc tortor. Nulla adipiscing erat a erat. Condimentum lorem posuere gravida enim
              posuere cursus diam.
            </p>
          </div>
        </div>
      </div>
    </div>
    <div>
      <button
        class="relative flex w-full items-center justify-center"
        type="button"
        aria-haspopup="dialog"
        aria-expanded="false"
        aria-controls="radix-:R2:"
        data-state="closed"
      >
        <img
          src="https://cdn.prod.website-files.com/624380709031623bfe4aee60/6243807090316216244aee67_Placeholder%20Video%20-%20Landscape.svg"
          alt="Relume placeholder image"
          class="aspect-video size-full object-cover"
        /><span class="absolute inset-0 z-10 bg-black/50"></span
        ><svg
          stroke="currentColor"
          fill="currentColor"
          stroke-width="0"
          viewBox="0 0 512 512"
          class="absolute z-20 size-16 text-white"
          height="1em"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM188.3 147.1c-7.6 4.2-12.3 12.3-12.3 20.9V344c0 8.7 4.7 16.7 12.3 20.9s16.8 4.1 24.3-.5l144-88c7.1-4.4 11.5-12.1 11.5-20.5s-4.4-16.1-11.5-20.5l-144-88c-7.4-4.5-16.7-4.7-24.3-.5z"
          ></path>
        </svg>
      </button>
    </div>
  </div>
</section>
import { Dialog, DialogTrigger, DialogContent } from "@relume_io/relume-ui";
import clsx from "clsx";
import React from "react";
import { useState } from "react";
import { CgSpinner } from "react-icons/cg";
import { FaCirclePlay } from "react-icons/fa6";

type ImageProps = {
  src: string;
  alt?: string;
};

type MetaTagProps = {
  title: string;
  description: string;
};

type Props = {
  children: React.ReactNode;
  metatags: MetaTagProps[];
  image: ImageProps;
  video: string;
};

export type Content15Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;

export const Content15 = (props: Content15Props) => {
  const { children, metatags, image, video } = {
    ...Content15Defaults,
    ...props,
  };

  const [isIframeLoaded, setIsIframeLoaded] = useState<boolean>(false);

  return (
    <section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28">
      <div className="container">
        <div className="mb-16 md:mb-[5.5rem] lg:mb-24">
          <div className="mx-auto max-w-lg">
            <div className="mb-8 grid grid-cols-2 gap-6 md:mb-10 md:grid-cols-4 md:gap-8 lg:mb-12">
              {metatags.map((item, index) => (
                <div key={index}>
                  <h3 className="mb-2 text-md font-bold leading-[1.4] md:text-lg md:leading-[1.4]">
                    {item.title}
                  </h3>
                  <p>{item.description}</p>
                </div>
              ))}
            </div>
            <div>
              <div className="prose">{children}</div>
            </div>
          </div>
        </div>

        <div>
          <Dialog>
            <DialogTrigger asChild>
              <button className="relative flex w-full items-center justify-center">
                <img
                  src={image.src}
                  alt={image.alt}
                  className="aspect-video size-full object-cover"
                />
                <span className="absolute inset-0 z-10 bg-black/50" />
                <FaCirclePlay className="absolute z-20 size-16 text-white" />
              </button>
            </DialogTrigger>
            <DialogContent>
              {!isIframeLoaded && <CgSpinner className="mx-auto size-16 animate-spin text-white" />}
              <iframe
                className={clsx(
                  "z-0 mx-auto aspect-video h-full w-full md:w-[738px] lg:w-[940px]",
                  {
                    visible: isIframeLoaded,
                    hidden: !isIframeLoaded,
                  },
                )}
                src={video}
                allow="autoplay; encrypted-media; picture-in-picture"
                allowFullScreen
                onLoad={() => setIsIframeLoaded(true)}
              ></iframe>
            </DialogContent>
          </Dialog>
        </div>
      </div>
    </section>
  );
};

export const Content15Defaults: Props = {
  metatags: [
    {
      title: "Label",
      description: "Lorem ipsum",
    },
    {
      title: "Label",
      description: "Lorem ipsum",
    },
    {
      title: "Label",
      description: "Lorem ipsum",
    },
    {
      title: "Label",
      description: "Lorem ipsum",
    },
  ],
  children: (
    <React.Fragment>
      <p>
        Morbi sed imperdiet in ipsum, adipiscing elit dui lectus. Tellus id scelerisque est
        ultricies ultricies. Duis est sit sed leo nisl, blandit elit sagittis. Quisque tristique
        consequat quam sed. Nisl at scelerisque amet nulla purus habitasse.
      </p>
      <p>
        Nunc sed faucibus bibendum feugiat sed interdum. Ipsum egestas condimentum mi massa. In
        tincidunt pharetra consectetur sed duis facilisis metus. Etiam egestas in nec sed et. Quis
        lobortis at sit dictum eget nibh tortor commodo cursus.
      </p>
      <p>
        Odio felis sagittis, morbi feugiat tortor vitae feugiat fusce aliquet. Nam elementum urna
        nisi aliquet erat dolor enim. Ornare id morbi eget ipsum. Aliquam senectus neque ut id eget
        consectetur dictum. Donec posuere pharetra odio consequat scelerisque et, nunc tortor. Nulla
        adipiscing erat a erat. Condimentum lorem posuere gravida enim posuere cursus diam.
      </p>
    </React.Fragment>
  ),
  video: "https://www.youtube.com/embed/8DKLYsikxTs?si=Ch9W0KrDWWUiCMMW",
  image: {
    src: "https://cdn.prod.website-files.com/624380709031623bfe4aee60/6243807090316216244aee67_Placeholder%20Video%20-%20Landscape.svg",
    alt: "Relume placeholder image",
  },
};
You need to be logged in to view the code.
Get the code
Upgrade your plan to view the code.
Upgrade
Details
Last updated
May 29, 2025
React version
18
Tailwind version
3.4
Need help?
For installation guidelines and API information, visit the docs.
Examples
No items found.