An unnamed playground on Frontend.fyi

Frontend.fyi

Playgrounds

Explore playgrounds

Learn

Courses
Recipes
Tutorials

aman5440 PRO

An unnamed playground on Frontend.fyi

Unlock Playgrounds

Build, test and share frontend ideas right in your browser.

Choose a plan

Maker€5 / monthUnlimited playgrounds to build, experiment and share.

Champion€10 / monthEverything in Maker, plus a Champion badge and you help Frontend.FYI grow.

Cancel anytime. Playgrounds are also included in PRO. Upgrade later and we credit 100% of your first 3 months and 50% of the rest toward it.

Already a member? Log in

Public Playground

Anyone can access this playground.

Share URL

https://fefyi.dev/de1e4b7cla

JSXapp.jsxCSSstyles.cssJSXindex.jsx

Open in editor

export const App = () => {

return (

<img

className="logo"

src="https://sandpack.frontend.fyi/img/fefyi.svg"

Time to draw some rectangles

</h1>

href="https://www.frontend.fyi/playgrounds"

target="_blank"

className="cta"

Frontend.fyi Playgrounds

</a>

</div>

);

}

:root {

--background-color: #1b1917;

--text-color: #fff;

background-color: var(--background-color);

background-image: url('https://sandpack.frontend.fyi/blueprint-assets/dots.svg');

background-repeat: repeat;

font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

}

.wrapper {

display: grid;

place-items: center;

min-height: 100dvh;

color: var(--text-color);

}

.content {

display: flex;

flex-direction: column;

align-items: center;

}

.logo {

margin-bottom: 1rem;

height: 3rem;

width: 3rem;

}

.title {

margin-bottom: 1rem;

max-width: 60%;

text-align: center;

font-size: 2rem;

text-wrap: balance;

}

.cta {

font-size: 0.875rem;

text-transform: uppercase;

color: var(--text-color);

}

import React from 'react';

import ReactDOM from 'react-dom/client';

import { App } from './app.jsx';

import './styles.css';

ReactDOM.createRoot(

document.querySelector('#root')

).render(<App />);