test – Frontend.fyi

Frontend.fyi

Playgrounds

Explore playgrounds

Learn

Courses
Recipes
Tutorials

combab0 PRO

test

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/gn3vwzjlzx5

JSXapp.jsxCSSstyles.cssJSXindex.jsx

Open in editor

export const App = () => {

return (

<img

className="mb-8 h-12 w-12"

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

<h1

className="mb-6 max-w-[60%] text-balance text-center font-mono text-3xl text-white"

Time to draw some rectangles

</h1>

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

target="_blank"

className="text-sm uppercase text-white bg-primary rounded-md px-2 py-1"

Frontend.fyi Playgrounds

</a>

</div>

);

}

@theme {

--color-primary: #7f22fe;

--color-background: #131018;

}

@layer base {

:root {

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

}

import React from 'react';

import ReactDOM from 'react-dom/client';

import './styles.css';

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

ReactDOM.createRoot(

document.querySelector('#root')

).render(<App />);