Menu
Career 16
<section id="relume" class="px-[5%] py-16 md:py-24 lg:py-28">
<div class="container max-w-lg">
<div class="mb-12 text-center md:mb-18 lg:mb-20">
<p class="mb-3 font-semibold md:mb-4">Tagline</p>
<h2 class="mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl">Open Positions</h2>
<p class="md:text-md">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros
elementum tristique.
</p>
</div>
<div class="flex flex-col gap-6 md:gap-8">
<div class="border border-border-primary p-6 md:p-8">
<div class="mb-3 flex md:mb-4">
<a href="#"><h3 class="text-xl font-bold md:text-2xl">Job Title</h3></a>
</div>
<p class="mb-5 md:mb-6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros
elementum tristique.
</p>
<div class="flex flex-wrap gap-y-3">
<div class="mr-6 flex items-center">
<div class="mr-3 flex-none">
<svg
stroke="currentColor"
fill="none"
stroke-width="2"
viewBox="0 0 24 24"
stroke-linecap="round"
stroke-linejoin="round"
class="flex size-6 flex-col items-center justify-center"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"></path>
<circle cx="12" cy="10" r="3"></circle>
</svg>
</div>
<span class="md:text-md">Location</span>
</div>
<div class="mr-6 flex items-center">
<div class="mr-3 flex-none">
<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
class="flex size-6 flex-col items-center justify-center"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path fill="none" d="M0 0h24v24H0z"></path>
<path
d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
></path>
<path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"></path>
</svg>
</div>
<span class="md:text-md">Contract Type</span>
</div>
</div>
</div>
<div class="border border-border-primary p-6 md:p-8">
<div class="mb-3 flex md:mb-4">
<a href="#"><h3 class="text-xl font-bold md:text-2xl">Job Title</h3></a>
</div>
<p class="mb-5 md:mb-6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros
elementum tristique.
</p>
<div class="flex flex-wrap gap-y-3">
<div class="mr-6 flex items-center">
<div class="mr-3 flex-none">
<svg
stroke="currentColor"
fill="none"
stroke-width="2"
viewBox="0 0 24 24"
stroke-linecap="round"
stroke-linejoin="round"
class="flex size-6 flex-col items-center justify-center"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"></path>
<circle cx="12" cy="10" r="3"></circle>
</svg>
</div>
<span class="md:text-md">Location</span>
</div>
<div class="mr-6 flex items-center">
<div class="mr-3 flex-none">
<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
class="flex size-6 flex-col items-center justify-center"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path fill="none" d="M0 0h24v24H0z"></path>
<path
d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
></path>
<path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"></path>
</svg>
</div>
<span class="md:text-md">Contract Type</span>
</div>
</div>
</div>
<div class="border border-border-primary p-6 md:p-8">
<div class="mb-3 flex md:mb-4">
<a href="#"><h3 class="text-xl font-bold md:text-2xl">Job Title</h3></a>
</div>
<p class="mb-5 md:mb-6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros
elementum tristique.
</p>
<div class="flex flex-wrap gap-y-3">
<div class="mr-6 flex items-center">
<div class="mr-3 flex-none">
<svg
stroke="currentColor"
fill="none"
stroke-width="2"
viewBox="0 0 24 24"
stroke-linecap="round"
stroke-linejoin="round"
class="flex size-6 flex-col items-center justify-center"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"></path>
<circle cx="12" cy="10" r="3"></circle>
</svg>
</div>
<span class="md:text-md">Location</span>
</div>
<div class="mr-6 flex items-center">
<div class="mr-3 flex-none">
<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
class="flex size-6 flex-col items-center justify-center"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path fill="none" d="M0 0h24v24H0z"></path>
<path
d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
></path>
<path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"></path>
</svg>
</div>
<span class="md:text-md">Contract Type</span>
</div>
</div>
</div>
</div>
</div>
</section>
import { LuMapPin } from "react-icons/lu";
import { MdAccessTime } from "react-icons/md";
type PositionProps = {
url: string;
title: string;
description: string;
location: string;
contractType: string;
};
type PositionCardProps = {
position: PositionProps;
};
type Props = {
tagline: string;
heading: string;
description: string;
positions: PositionProps[];
};
export type Career16Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
export const Career16 = (props: Career16Props) => {
const { tagline, heading, description, positions } = {
...Career16Defaults,
...props,
};
return (
<section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28">
<div className="container max-w-lg">
<div className="mb-12 text-center md:mb-18 lg:mb-20">
<p className="mb-3 font-semibold md:mb-4">{tagline}</p>
<h2 className="mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl">{heading}</h2>
<p className="md:text-md">{description}</p>
</div>
<div className="flex flex-col gap-6 md:gap-8">
{positions.map((position, index) => (
<PositionCard key={index} position={position} />
))}
</div>
</div>
</section>
);
};
const PositionCard: React.FC<PositionCardProps> = ({ position }) => {
return (
<div className="border border-border-primary p-6 md:p-8">
<div className="mb-3 flex md:mb-4">
<a href={position.url}>
<h3 className="text-xl font-bold md:text-2xl">{position.title}</h3>
</a>
</div>
<p className="mb-5 md:mb-6">{position.description}</p>
<div className="flex flex-wrap gap-y-3">
<div className="mr-6 flex items-center">
<div className="mr-3 flex-none">
<LuMapPin className="flex size-6 flex-col items-center justify-center" />
</div>
<span className="md:text-md">{position.location}</span>
</div>
<div className="mr-6 flex items-center">
<div className="mr-3 flex-none">
<MdAccessTime className="flex size-6 flex-col items-center justify-center" />
</div>
<span className="md:text-md">{position.contractType}</span>
</div>
</div>
</div>
);
};
const position = {
url: "#",
title: "Job Title",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
location: "Location",
contractType: "Contract Type",
};
export const Career16Defaults: Props = {
tagline: "Tagline",
heading: "Open Positions",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
positions: [position, position, position],
};
.svg)
.svg)
Need help?
For installation guidelines and API information, visit the docs.
Examples
No items found.
.avif)
.avif)
.avif)
.webp)
.webp)
.webp)
