JSFiddle - React, Tailwind, and code Playground

by ramdsr26

HTML

<div class="sitemakers">
  <div class="resize">
  <p class="browser">Resize Browser</p>
    </br>
    <p>Break Points at</br>
  400px & 800px</p>
  </div>
<div class="wrap"><svg class="bulb" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="128px"
	 height="128px" viewBox="0 0 128 128" enable-background="new 0 0 128 128" xml:space="preserve">
<g id="s-bulb-128">
	<g>
		<path fill-rule="evenodd" clip-rule="evenodd"...

CSS

.sitemakers {
  width: 100%;
  height: 100%;
  display: block;
  background: -webkit-radial-gradient(rgba(57,60,76,1), rgba(36,36,46,1) 80%);
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.resize {
  
  position: absolute;
  background: #1D1F27;
  padding: 10px;
  width: 200px;
  border-radius: 5px 5px 0 0;
  text-align: center;
  font-family: helvetica;
  color: #ffdf43;
  font-size: 8pt;
  text-transform: uppercase;
  top: 50%;
  right: -115px;
  margin-top: -55px;
  transform: translate(-50%, -50%);
  transform: rotate(270deg);
  transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
}

.resize:hover {
    right: -60px;
      transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.browser {
    letter-spacing: 4pt;
    color: #c4d8d9;
}

.wrap {
  
}

  .wrap:before {
    content: '';
    display: block;
    width: 0px;
    height: 0px;
    background: rgba(185,185,219,1);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }

.wrap .bulb {
    position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  width: 128px;
  height: 128px; 
  transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrap #s-bulb-128, .wrap #s-bulb-64, .wrap #s-bulb-16 {
  stroke: #262832;
  fill: #262832;
  stroke-width: 0;
  transition: 300ms;
}

.wrap #s-bulb-128, .wrap #s-bulb-64, .wrap #s-bulb-16 {
  stroke: #262832;
  fill: #262832;
  transition: 1500ms;
}

.wrap:hover #s-bulb-128,.wrap:hover #s-bulb-64, .wrap:hover #s-bulb-16 {
  fill: #c4d8d9;
  stroke: #c4d8d9;
  stroke-width: 2;
  transition: 100ms;
}

.wrap #www-filament-128,.wrap #www-filament-64, .wrap #www-filament-16 {
  stroke-width: 0;
  stroke-width: 0;
  transition: 300ms;
}

.wrap #www-filament-128, .wrap #www-filament-64, .wrap #www-filament-16 {
  fill: #333542;
  stroke: #333542;
  transition:...

JavaScript

/**
 * CROSS BROWSER PREFIX RESOLVE
 */
(function(){function t(e,t){return[].slice.call((t||document).querySelectorAll(e))}if(!window.addEventListener)return;var e=window.StyleFix={link:function(t){try{if(t.rel!=="stylesheet"||t.hasAttribute("data-noprefix"))return}catch(n){return}var r=t.href||t.getAttribute("data-href"),i=r.replace(/[^\/]+$/,""),s=(/^[a-z]{3,10}:/.exec(i)||[""])[0],o=(/^[a-z]{3,10}:\/\/[^\/]+/.exec(i)||[""])[0],u=/^([^?]*)\??/.exec(r)[1],a=t.parentNode,f=new XMLHttpRequest,l;f.onreadystatechange=function(){f.readyState===4&&l()};l=function(){var n=f.responseText;if(n&&t.parentNode&&(!f.status||f.status<400||f.status>600)){n=e.fix(n,!0,t);if(i){n=n.replace(/url\(\s*?((?:"|')?)(.+?)\1\s*?\)/gi,function(e,t,n){return/^([a-z]{3,10}:|#)/i.test(n)?e:/^\/\//.test(n)?'url("'+s+n+'")':/^\//.test(n)?'url("'+o+n+'")':/^\?/.test(n)?'url("'+u+n+'")':'url("'+i+n+'")'});var r=i.replace(/([\\\^\$*+[\]?{}.=!:(|)])/g,"\\$1");n=n.replace(RegExp("\\b(behavior:\\s*?url\\('?\"?)"+r,"gi"),"$1")}var l=document.createElement("style");l.textContent=n;l.media=t.media;l.disabled=t.disabled;l.setAttribute("data-href",t.getAttribute("href"));a.insertBefore(l,t);a.removeChild(t);l.media=t.media}};try{f.open("GET",r);f.send(null)}catch(n){if(typeof XDomainRequest!="undefined"){f=new XDomainRequest;f.onerror=f.onprogress=function(){};f.onload=l;f.open("GET",r);f.send(null)}}t.setAttribute("data-inprogress","")},styleElement:function(t){if(t.hasAttribute("data-noprefix"))return;var n=t.disabled;t.textContent=e.fix(t.textContent,!0,t);t.disabled=n},styleAttribute:function(t){var n=t.getAttribute("style");n=e.fix(n,!1,t);t.setAttribute("style",n)},process:function(){t('link[rel="stylesheet"]:not([data-inprogress])').forEach(StyleFix.link);t("style").forEach(StyleFix.styleElement);t("[style]").forEach(StyleFix.styleAttribute)},register:function(t,n){(e.fixers=e.fixers||[]).splice(n===undefined?e.fixers.length:n,0,t)},fix:function(t,n,r){for(var...