JSFiddle - React, Tailwind, and code Playground

by chrisjg

HTML

<div class="css-logo-container">
    <p>
        <span class="heading1">Colour</span>
        <span class="heading2">Greyscale</span>
    </p>
    <br />
    <div class="logo">
        <span class="logo-css">K</span>
    </div>
    <p class="tagline">
        <span class="red">K</span>ISS<br />
        <span class="red">W</span>eb<br />
        <span class="red">D</span>esign
    </p>
    <div class="logo next">
        <span class="logo-css-bw">K</span>
    </div>
    <p class="tagline-bw">
        <span class="bw-highlight">K</span>ISS<br />
        <span class="bw-highlight">W</span>eb<br />
        <span class="bw-highlight">D</span>esign
    </p>
</div>
<div class="logo-image-container">
    <div class="logo">
        <img class="logo-image" src="http://www.gravatar.com/avatar/f38fc8460ec1f7f76f2f3720ea7012c6.png" />
    </div>
    <p class="tagline-for-image">
        <span class="red">K</span>ISS<br />
        <span class="red">W</span>eb<br />
        <span class="red">D</span>esign
    </p>
</div>
<div class="logo-word">
    <span class="logo-css word first">K</span>
    <span class="logo-css word">I</span>
    <span class="logo-css word">S</span>
    <span class="logo-css word last">S</span>
    <div class="tagline-word">
        <span class="red">W</span>eb <span class="red">D</span>esign
    </div>
</div>
<br />
<div class="logo-word-long">
    <span class="logo-css word first">K</span>
    <span class="logo-css word">I</span>
    <span class="logo-css word">S</span>
    <span class="logo-css word last">S</span>
    <div class="tagline-word-long">
        <span class="red">W</span>eb<br /><span class="red">D</span>esign
    </div>
</div>
<br />
<div class="logo-word-extra-long">
    <span class="logo-css word first">K</span>
    <span class="logo-css word">I</span>
    <span class="logo-css word">S</span>
    <span class="logo-css word last">S</span>
    <div class="tagline-word-extra-long">
        <span class="red">W</span>eb <span...

CSS

/* Repeat all settings in colour and greyscale *
 * classes, so that they would function as     *
 * stand-alone classes for copy/paste actions  *
 * Use rem units for ALL size specifications   */

/* Change your default font size for your      *
 * browser to see the scaling differences      *
 * between the CSS and the image               */

/* CSS logo */
.logo {
    margin: 1rem 0.3rem 1rem 1rem;
    float: left;
}

.css-logo-container {
    height: 6.25rem;
    width: 23.4375rem;
}

/* colour CSS */
.logo-css {
    font-family: "arial";
    font-size: 4.4rem;
    font-effect: outline;
    line-height: 1.7rem;
    color: #c8c8c8;
    padding: 0 1rem;
    text-shadow: 0.125rem 0px 0.125rem black, 
        0px 0px 0.1875rem #c15dbe, 
        0px 0px 0.4375rem #c15dbe, 
        0px 0px 0.6875rem #c15dbe, 
        0px 0px 1.063rem #c15dbe, 
        0px 0px 1.563rem #6c316a, 
        0px 0px 2.188rem white, 
        0px 0px 4.375rem white;
    background: #3b1939;
    border: 0.3rem solid white;
    border-radius: 0.5rem;
}

/* Greyscale CSS - possibly for printing */
.logo-css-bw {
    text-shadow: 0px 0.0625rem 0px black,
        0px -0.0625rem 0px black,
        0.0625rem 0px 0px black,
        -0.0625rem 0px 0px black,
        0.125rem 0px 0.125rem black,
        0px 0px 0.1875rem white,
        0px 0px 0.4375rem white,
        0px 0px 0.6875rem white,
        0px 0px 1.063rem white,
        0px 0px 1.563rem white,
        0px 0px 2.188rem white;
    background: #858887;
    font-family: "arial";
    font-size: 4.4rem;
    font-effect: outline;
    line-height: 1.7rem;
    color: #c8c8c8;
    padding: 0 1rem;
    border: 0.3rem solid white;
    border-radius: 0.5rem;
}

/* image version of the logo for reference */
.logo-image-container {
    display: block;
    width: 12.5rem;
    height: 7.5rem;
    padding-bottom: 1.5rem;
}

.logo-image {
    border: 0.3rem solid white;
    border-radius: 0.5rem;
    width: 5rem;
}

/* colour tagline */
.tagline {
   ...