JSFiddle - React, Tailwind, and code Playground

by Laurent Dufour

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,
.Account a{
    color:red;
}
.noAccount,
.noAccount a{
    color:blue;
}
.noAccount a:visited,
.Account a:visited{
    color:black;
}