JSFiddle - React, Tailwind, and code Playground

by rolandixor

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">

  <head>
    <meta charset="utf-8">

    <link rel="stylesheet" href="css/anole.css">

    <title>Basic Website Using Anole</title>
  </head>

  <body class="anole">
    <div class="an-head">
      <div class="an-title">
        basic template
      </div>
      <a class="an-home-button" href="../../">return home</a>
    </div>
    <div class="an-body">
      <div class="an-box">
        This page represents a very basic website/page, made with nothing put pure HTML and <i>anole.css</i>.
      </div>
      <div class="an-codeblock">
        &lt;html <span class="an-code-green">lang="en" dir="ltr"</span>&gt; &lt;head&gt; &lt;meta <span class="an-code-green">charset="utf-8"</span>&gt; &lt;link rel="stylesheet" href="../anole.css"&gt; &lt;title&gt;Basic Website Using Anole&lt;/title&gt;
        &lt;/head&gt; &lt;body class="anole"&gt; &lt;div class="an-head"&gt; &lt;/div&gt; &lt;div class="an-body"&gt; &lt;div class="an-box"&gt; This page represents a very basic website, made with nothing put pure HTML and &lt;i&gt;anole.css&lt;/i&gt;.
        &lt;/div&gt; &lt;div class="an-codeblock"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="an-tail"&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;
      </div>
    </div>
    <br>
    <div class="an-gen-spacer">

    </div>
    <div class="an-tail">
      <div class="an-group">
        <a class="an-button an-btn-spc">source code &gt;</a>
        <a class="an-button an-btn-alt">jsfiddle &gt;</a>
      </div>
    </div>
  </body>

</html>

CSS

/***
As with Passionfruit, Anole is designed to help you get your site up and running
quickly. Also, as with Passionfruit, Anole sets nothing by default. Rather, it is
designed to only come when called, so that you can mix and match it with other
CSS frameworks such as Bootstrap, Foundation, and others.

Anole is light-weight and loads quickly, but it contains numerous components
and even animations. It is recommended that you use it with Passionfruit if you
want the finer grained control provided by Passionfruit as opposed to Anole, but
you should be able to get right to work - right away, without needing to dive
back into your CSS code very often.

Just write your HTML, drop in the right classes, and watch Anole do the work
of making your site look pretty for you!
*/

/**Fonts**/

/* Webfont: Lato-Black */

@font-face {
  font-family: 'LatoWebBlack';
  src: url('fonts/Lato-Black.eot');
  /* IE9 Compat Modes */
  src: url('fonts/Lato-Black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('fonts/Lato-Black.woff2') format('woff2'), /* Modern Browsers */
  url('fonts/Lato-Black.woff') format('woff'), /* Modern Browsers */
  url('fonts/Lato-Black.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

/* Webfont: Lato-BlackItalic */

@font-face {
  font-family: 'LatoWebBlack';
  src: url('fonts/Lato-BlackItalic.eot');
  /* IE9 Compat Modes */
  src: url('fonts/Lato-BlackItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('fonts/Lato-BlackItalic.woff2') format('woff2'), /* Modern Browsers */
  url('fonts/Lato-BlackItalic.woff') format('woff'), /* Modern Browsers */
  url('fonts/Lato-BlackItalic.ttf') format('truetype');
  font-style: italic;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

/* Webfont: Lato-Bold */

@font-face {
  font-family: 'LatoWebBold';
  src: url('fonts/Lato-Bold.eot');
  /* IE9 Compat Modes */
  src: url('fonts/Lato-Bold.eot?#iefix')...