JSFiddle - React, Tailwind, and code Playground

by exercices

HTML

<div class="sites mail Account"><p></p><a href="http://accounts.google.com/AddSession?continue=https%3A%2F%2Fmail.google.com%2Fmail"><img src="https://aeonlaw.eu/codislo/wp-content/uploads/2018/04/2000px-Gmail_Icon.svg_.png" alt="gmail" title="La boite mail la plus utilisée créée par Google" style="width:80px"></a><br><a href="http://accounts.google.com/AddSession?continue=https%3A%2F%2Fmail.google.com%2Fmail"><p>Gmail</p></a></div>
<div class="sites mail Account"><p></p><a href="http://sfr.fr/cas/login?service=webmail.sfr.fr"><img src="https://upload.wikimedia.org/wikipedia/commons/c/c2/SFR_logo_2014.png" alt="SFRmail" title="La boite mail créée par SFR" style="width:60px"></a><br><a href="http://sfr.fr/cas/login?service=webmail.sfr.fr"><p>SFR mail</p></a></div>
<div class="sites computer noAccount"><p></p><a href="http://jsfiddle.net"><img src="https://cdn.worldvectorlogo.com/logos/jsfiddle.svg" alt="jsfiddle" title="Le fiddle pour les langages du web" style="width:60px"></a><br><a href="http://jsfiddle.net"><p>Fiddle web</p></a></div>
<div class="sites computer noAccount"><p></p><a href="http://iplogger.org"><img src="https://iplogger.org/templates/new/i/200x200.png" alt="iplogger" title="Le site pour suivre les IP" style="width:60px"></a><br><a href="http://iplogger.org"><p>Iplogger</p></a></div>

<br><br><br><br><br><br><br><br><br>
<span class="Account"><p>Cette couleur signifie que le site requiert un compte.</p></span>
<span class="noAccount"><p>Cette couleur signifie que le site ne requiert pas obligatoirement de compte.</p></span>

CSS

.sites p{font-size:72%;position:relative;text-align:center}
a{text-decoration:none}
div{display:inline;float:left;padding:10px;margin:14px}
.sites{height:100px;width:100px;border-radius:10%;border: dashed black 1px}
img{position:relative;right:10px;width:120px;left: 50%;transform: translateX(-50%)}
.sites:hover{background-color:yellow}


.Account{color:red}
.noAccount{color:blue}
.noAccount a:visited{color:black}
.Account a:visited{color:black}