JSFiddle - React, Tailwind, and code Playground

by masaab algailani

HTML

<input type="number" min="1" max="5" />

<div id="onlynChild">
     <p>I am p1</p>
    <span>I am span</span>
   
</div>

<div id="onlyType">
    <span>I am span</span>
    <p>I am p1</p>
</div>
<a href="http://www.google.com.au">I am google link</a>
<a href="http://www.google.com.au">I am google link</a>
<br/>
<a href="#a1">I am link</a>
<a href="#a2">I am link2</a>

<p id="a1">Hello World</p>
<p id="a2">Hello World</p>

CSS

input:out-of-range{
    color:red;
}
#onlynChild p:only-child{
    color:red;
}

#onlyType p:only-of-type{
    color:red;
}
a[href="http://www.google.com.au"]:hover:after{
    content:"("attr(href)")";
    background-color:red;
}
a[href*="http://www.google"]:hover:after{
    content:"("attr(href)")";
    background-color:red;
}
#a1:hover{
    color:red;
}
#a1:target{
    color:red;
}
#a2:target{
    color:green;
}