JSFiddle - React, Tailwind, and code Playground

by tonytlwu

HTML

<div id="outer">
    Hover over this red <code>&lt;DIV&gt;</code> to see the style of <code>&lt;BUTTON&gt;</code> change.
    <div id="inner">
        <button>Button</button>
    </div>
</div>

CSS

body {
    text-align: center;
    margin: 0;
}

#outer {
    padding: 70px;
    background: rgba(255,0,0,0.3);
}

#inner {
    padding: 30px;
    background: rgba(0,255,0,0.3);
}

#outer:hover button {
    font-size: 24px;
}