JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<svg id="obturateur3" class="obturateur" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100%" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" onclick="obt3.reset().play();">
  <path d="M10,100A90,90 0,1,1 190,100A90,90 0,1,1 10,100" style="stroke-dasharray: 566, 568;stroke-dashoffset: 0;"></path>
  <path d="M14.260000000000005,100A85.74,85.74 0,1,1 185.74,100A85.74,85.74 0,1,1 14.260000000000005,100" style="stroke-dasharray: 539, 541; stroke-dashoffset: 0;"></path>
  <path d="M27.052999999999997,100A72.947,72.947 0,1,1 172.947,100A72.947,72.947 0,1,1 27.052999999999997,100" style="stroke-dasharray: 459, 461; stroke-dashoffset: 0;"></path>
  <path d="M60.26,100A39.74,39.74 0,1,1 139.74,100A39.74,39.74 0,1,1 60.26,100" style="stroke-dasharray: 250, 252; stroke-dashoffset: 0;"></path>
  <path d="M34.042,131.189L67.047,77.781" style="stroke-dasharray: 63, 65; stroke-dashoffset: 0;"></path>
  <path d="M31.306,75.416L92.41,60.987" style="stroke-dasharray: 63, 65; stroke-dashoffset: 0;"></path>
  <path d="M68.81,34.042L122.219,67.046" style="stroke-dasharray: 63, 65; stroke-dashoffset: 0;"></path>
  <path d="M124.584,31.305L139.013,92.409" style="stroke-dasharray: 63, 65; stroke-dashoffset: 0;"></path>
  <path d="M165.957,68.809L132.953,122.219" style="stroke-dasharray: 63, 65; stroke-dashoffset: 0;"></path>
  <path d="M168.693,124.584L107.59,139.012" style="stroke-dasharray: 63, 65; stroke-dashoffset: 0;"></path>
  <path d="M131.19,165.957L77.781,132.953" style="stroke-dasharray: 63, 65; stroke-dashoffset: 0;"></path>
  <path d="M75.417,168.693L60.987,107.59" style="stroke-dasharray: 63, 65; stroke-dashoffset: 0;"></path>
</svg>

CSS

/* Base style */
html {
  font-size: 24px;
}
body {
  margin: 0 0 40px;
  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 200;
  color: #666666;
  background-color: #FFFFFF;
  word-break: break-word;
}
a, a:visited, a:hover, a:link {
  color: inherit;
  outline: 0;
}
small {
  font-weight: 100;
}
p {
  font-size: 1rem;
  line-height: 1.4rem;
}
button, .button {
  margin: 0; padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid currentColor;
  color: inherit;
  background-color: rgba(0,0,0,0);
  font-size: 0.6rem;
  font-weight: 300;
  text-decoration: none;
  cursor: pointer;
  outline: 0;
}
button.active, .button.active {
  background-color: currentColor;
}
button.active span, .button.active span {
  color: #FFFFFF;
}
i {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}
svg * {
  fill: none;
  stroke: currentColor;
}

/* Common components */
.bloc {
  color: #f9f9f9;
  padding: 1px 0 30px;
  clear: both;
}
.content {
  margin: auto;
  max-width: 960px;
  padding: 0 20px;
}
.col3 {
  width: 33.33%;
  float: left;
  text-align: center;
  border-bottom-color: currentColor;
  border-bottom-style: solid;
}
.col-container {
  padding: 0 12px;
}
.col3 p {
  font-size: 0.75rem;
  line-height: 1.05rem;
}

/* Text */
.bigger {
  font-size: 1rem;
  font-weight: 100;
  line-height: 1.4rem;
}
.center {
  text-align: center;
}
.clearer {
  clear: both;
}
.striked {
  text-decoration: line-through;
}
.italic {
  font-style: italic;
}

/* Blocs */
.bloc-head     { color: #5aa8c5; padding: 30px; }
.bloc-demo     { color: #FF495F; }
.bloc-timing   { color: #F7A800; }
.bloc-scenario { color: #4fe084; }
.bloc-doc      { color: #69B0CA; }

/* Custom */
#hi-there {
  width: 100%;
  stroke-width:4;
}
.intro-links {
  text-align: right;
}
.example-description {
  margin-left: 440px;
}
.timing-description {
  min-height: 200px;
  margin-right: 240px;
}
.obturateur {
  stroke-width: 3;
  stroke-miterlimit: 10;
}
#polaroid {
  float:...