<div id="root"></div>
@use postcss-preset-env {
stage: 0;
}
:root {
--color-background: #e8e0fd;
--color-text: #111;
--font-family: Roboto, sans-serif;
}
body {
background-color: var(--color-background);
color: var(--color-text);
display: grid;
font-family: var(--font-family);
line-height: 1.5;
margin: 0;
min-block-size: 100vh;
place-content: center;
}
.app {
padding: 5vmin;
}
.grid {
inline-size: 90vw;
margin-inline: auto;
max-inline-size: 1440px;
}
.aspect-ratio {
overflow: hidden;
padding-block-start: 100%;
position: relative;
}
.aspect-ratio > * {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.palettes {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 3em;
}
.palette {
box-shadow: 0.25em 0.25em 2em rgba(0, 0, 0, 0.25);
border-radius: 0.5em;
margin: 0;
overflow: hidden;
}
.palette__caption {
background-color: #fff;
font-size: 0.875rem;
font-weight: 500;
padding: 1.5em;
text-align: center;
text-transform: uppercase;
}
View Compiled
import React, { StrictMode } from "https://esm.run/react@18";
import { createRoot } from "https://esm.run/react-dom@18/client";
const AspectRatio = (props) => {
const { ratio = 1 / 1, otherProps } = props;
return (
<div
className="aspect-ratio"
style={{ paddingTop: `${100 / ratio}%` }}
{otherProps}
/>
);
};
const Gradient = (props) => {
const { angle = 0, from, to } = props;
return (
<div
style={{
backgroundImage: `linear-gradient(${angle}deg, ${from}, ${to})`
}}
/>
);
};
const Palette = (props) => {
const { from, to } = props;
return (
<figure className="palette">
<AspectRatio>
<Gradient angle={135} {props} />
</AspectRatio>
<figcaption className="palette__caption">
{from} – {to}
</figcaption>
</figure>
);
};
const Palettes = (props) => {
const { palettes } = props;
return (
<div className="palettes">
{palettes.map((palette) => (
<Palette key={palette.toString()} {palette} />
))}
</div>
);
};
const Grid = (props) => {
return <div className="grid" {props} />;
};
const App = () => {
const palettes = [
{
from: "#f40076",
to: "#df98fa"
},
{
from: "#f06966",
to: "#fad6a6"
},
{
from: "#ff0076",
to: "#590fb7"
},
{
from: "#9055ff",
to: "#13e2da"
},
{
from: "#0b63f6",
to: "#003cc5"
},
{
from: "#d6ff7f",
to: "#00b3cc"
},
{
from: "#e233ff",
to: "#ff6b00"
},
{
from: "#df98fa",
to: "#9055ff"
},
{
from: "#ed7b84",
to: "#9055ff"
},
{
from: "#402565",
to: "#30be96"
},
{
from: "#402662",
to: "#3900a6"
},
{
from: "#f14658",
to: "#dc2537"
},
{
from: "#f40076",
to: "#342711"
},
{
from: "#000066",
to: "#6699ff"
},
{
from: "#cb5eee",
to: "#4be1ec"
},
{
from: "#fa7cbb",
to: "#f14658"
},
{
from: "#737dfe",
to: "#ffcac9"
},
{
from: "#2f80ed",
to: "#b2ffda"
}
];
return (
<div className="app">
<Grid>
<Palettes palettes={palettes} />
</Grid>
</div>
);
};
createRoot(document.getElementById("root")).render(
<StrictMode>
<App />
</StrictMode>
);
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.