JSFiddle - React, Tailwind, and code Playground

by netsi1964

HTML

<div id="test">
<img src="http://pcdn.500px.net/8514073/ba276d6f02e9901e86fe56e551814b3960458a10/4.jpg?t=true" class="round" />
<img src="http://pcdn.500px.net/8514073/ba276d6f02e9901e86fe56e551814b3960458a10/4.jpg?t=true" class="round-top" />
<img src="http://pcdn.500px.net/8514073/ba276d6f02e9901e86fe56e551814b3960458a10/4.jpg?t=true" class="round shadow" />
<img src="http://pcdn.500px.net/8514073/ba276d6f02e9901e86fe56e551814b3960458a10/4.jpg?t=true" class="round-top shadow" />
<div class="round">I have round corner</div>
</div><h1>Simple example of CSS effects - try to move mouse over cat.</h1>
<ol>
    <li>We reuse an image, adding various CSS classes to get effects</li>
    <li>.round has a border radius on all sides of 20px</li>
    <li>.round-top only applies border radius on top</li>
    <li>.shadow and hover on image (img:hover) will apply a 10px wide and 10px blurred shadow of the RGBA color black + 50% opacity (rgba(0,0,0 is the black and 0,5 is the 50% opacity))</li>
    </ol>
<a href="http://www.netsi.dk/html5/css3-generator/" target="_blank">Try my webapp for generating round corners</a>
See also "<a href="http://www.searcheeze.com/p/netsi1964/developments-in-css3" target="_blank">Developments in CSS3</a>"

CSS

.round {
    border-radius: 20px;
}
.round-top {
    border-radius: 20px 20px 0px 0px;
    border: solid 2px black;
}
img:hover, div.round:hover, .shadow {
    box-shadow: 0px 0px 10px 10px rgba(0,0,0,.5);
}
.shadow:hover {
    -webkit-box-shadow: 0px 0px 10px 10px rgba(0,0,0,.1), 0px 0px 10px 10px rgba(255,255,255,.8);
    box-shadow: 0px 0px 10px 10px rgba(0,0,0,.1), 0px 0px 10px 10px rgba(255,255,255,.8);
}
img {width: 125px; margin: 0px 20px;}
div {margin: 10px; padding: 10px; background-color: rgba(0,0,0,.1)}
#test {padding: 20px;}
h1 {font-size: 120%;}
body {font-family: sans-serif; padding: 10px;}
* {
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -ms-transition: all 1s;
    transition: all 1s;
}