JSFiddle - React, Tailwind, and code Playground

by bman654

HTML

<div id="blackbox">
    <div id="logo"></div>
    <div id="hr"></div>
    <div id="content"></div>
</div>

CSS

html {
    width: 100%;
    height: 100%;
}
body {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 20px;
    margin: 0;
    background-image: linear-gradient(to right, red 0%, orange 50%, yellow 100%);
}
#blackbox {
    width: 100%;
    height: 100%;
    background-color: black;
    padding: 20px;
    box-sizing: border-box;
}

#logo {
    width: 100%;
    height: 100px;
    background-color: blue;
}

#hr {
    width: 100%;
    height: 30px;
    margin-top: 20px;
    background-position: left -40px top;
    background-image: linear-gradient(to right, red -40px, orange 50%, yellow);
}