JSFiddle - React, Tailwind, and code Playground

by darkylmnx

HTML

<div>
  <svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 98.06 66.7">
    <defs>
      <style>.cls-1{fill:#fff;} .cls-2{fill:#000;}</style>
    </defs>
    
    <title>Fichier 1</title>
    
    <g id="Calque_2" data-name="Calque 2">
      <g id="Calque_1-2" data-name="Calque 1">
        <rect class="cls-1" x="25.6" y="38.99" width="71.92" height="9.15" rx="4.57" ry="4.57"/>
        <rect class="cls-1" y="19.49" width="97.52" height="9.15" rx="4.57" ry="4.57"/>
        <rect class="cls-2" x="0.54" width="96.45" height="9.15" rx="4.57" ry="4.57"/>
        <rect class="cls-2" x="25.6" y="19.49" width="72.46" height="9.15" rx="4.57" ry="4.57"/>
        <rect class="cls-2" x="58.94" y="38.99" width="39.12" height="9.15" rx="4.57" ry="4.57"/>
        <circle class="cls-1" cx="53.14" cy="60.91" r="5.8"/>
        <circle class="cls-2" cx="81.12" cy="60.91" r="5.8"/>
     </g>
   </g>
 </svg>
</div>

CSS

div {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  width: 100px;
  color: #fff;
  font-size: 24px;
  border-radius: 50%;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffee00+0,25a6f7+100 */
background: #ffee00; /* Old browsers */
background: -moz-linear-gradient(-45deg, #ffee00 0%, #25a6f7 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #ffee00 0%,#25a6f7 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #ffee00 0%,#25a6f7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffee00', endColorstr='#25a6f7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

#logo {
  width: 50px;
  height: 50px;
}