JSFiddle - React, Tailwind, and code Playground

by meo

HTML

<ul>
    <li><a href="#">deine mutter</a></li>
    <li><a href="#">deine grossmuddi</a></li>
    <li><a href="#">ta mère</a></li>
    <li><a href="#">dine schnegge</a></li>
</ul>

CSS

body, html {
    font-family: helvetica, arial;
    padding: 10px;
}

li {
    float: left;
    border: 2px solid #fff;
    background: rgba(0,0,0,.05);
    padding: 2px 5px;
    margin: 0 4px 0 0;
    
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    
    -moz-box-shadow: 0 0 2px rgba(0,0,0,.3);
    -webkit-box-shadow: 0 0 2px rgba(0,0,0,.3);
    box-shadow: 0 0 2px rgba(0,0,0,.3);
}

a {
    text-decoration: none;
}

a:before {
    content: "♥";
    padding: 0 3px;
    color: red;
    text-shadow: 0 0 2px rgba(0,0,0,.8);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

a:hover:before {
    
  -webkit-transform: rotate(360deg);  /* Saf3.1+, Chrome */
     -moz-transform: rotate(360deg);  /* FF3.5+ */
      -ms-transform: rotate(360deg);  /* IE9 */
          transform: rotate(360deg);  

}