JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<ul>
    <li><a href="#non">The rise in mobile web surfing.</a></li>
    <li><a href="#non">What happens if you see this page.</a></li>
    <li><a href="#non">Another thing to look out for.</a></li>
    <li><a href="#non">One click should open the phone dialer.</a></li>
    <li><a href="#non">You're interested in optimising.</a></li>
</ul>

SCSS

$baseline-px: 16px;

@mixin rem($property, $px-values) { 
  $baseline-rem: $baseline-px / 1rem;
  #{$property}: $px-values;
  @if type-of($px-values) == "number" {
    #{$property}: $px-values / $baseline-rem; }
  @else {
    $rem-values: unquote("");
    @each $value in $px-values {
      @if $value == 0 {
        $rem-values: append($rem-values, $value); }
      @else {
        $rem-values: append($rem-values, $value / $baseline-rem); } }
    #{$property}: $rem-values; } 
}

/*- Base
------------------------------------------------------------*/

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box; }

body { 
    max-width: 600px;
    margin: 4.5em auto 0 auto; 
    width: 90%;   
    font-size: 100%;
    font-family: sans-serif;
    line-height: 1.5em;
    line-height: 1.5rem;
}

a { 
    text-decoration: none; 
    color: #000;
}

ul, ol {
    margin: 0 0 24px 0;
    @include rem(margin, 0 0 24px 0);
    list-style-type: none;
    & li {
        @include rem(margin, 0 0 0 48px);         
        position: relative;  
        &:before { 
            position: absolute;
            content: "";
            @include rem(left, -20px);
            @include rem(top, 9px);
            @include rem(height, 4px);
            @include rem(width, 4px);
            border-radius: 100%;
            background: #ddd;
        }
        &:hover:before { 
            background: red;
        }
        &:after {          
            position: absolute;
            content: "";
            @include rem(left, -24px);
            @include rem(top, 5px);
            @include rem(height, 8px);
            @include rem(width, 8px);
            border-radius: 100%;
            background: transparent;  
            @include rem(border, 2px); 
            border-style: solid;
            border-color: #ddd;   
            &:hover { 
                background: red;
         ...

JavaScript

// lists