JSFiddle - React, Tailwind, and code Playground

by infous

HTML

<p>w: 300px, h: 100px, border-radius: 0</p>
<div class="d1"></div>
<p>w: 300px, h: 100px, border-radius: 50%</p>
<div class="d2"></div>
<p>w: 200px, h: 200px, border-radius: 50%</p>
<div class="d3"></div>

CSS

p { text-align: center; }

.d1, .d2, .d3 {
    margin: 20px auto;
}

.d1 {
    background: red;
    width: 300px;
    height: 100px;
}

.d2 {
    background: blue;
    border-radius: 50%;
    width: 300px;
    height: 100px;    
}

.d3 {
    background: green;
    border-radius: 50%;
    width: 200px;
    height: 200px;    
}