JSFiddle - React, Tailwind, and code Playground

by Wudiemperor

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Insert title here</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="baidu-site-verification" content="">
    <meta name="google-site-verification" content="">
    <!-- <link rel="shortcut icon" href="/favicon.png">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png"> -->
    <!-- <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="CSS-Tricks Search"> -->
    <style type="text/css">
    ul, li {
        margin: 0;
        padding: 0;
        border: 0;
        list-style: none;
    }
    .clearfix:after {
        content: ".";
        display: block;
        font-size: 0;
        height: 0;
        line-height: 0;
        clear: both;
            visibility: hidden; 
    }
        /*Trigger Layout in IE6*/
    * html .clearfix {
        zoom: 1;
    }
        /*Trigger Layout in IE7*/
     *:first-child+html .clearfix { zoom: 1; }
    .float-list {
        width: 400px;
        border: 1px solid #f00;
        border-bottom: none;
    }
    .float-list li {
        padding: 10px;
        border-bottom: 1px solid #f00;
    }
    .float-list li a {
        float: left;
    }
    .float-list li span {
        float: right;
    }
    </style>
</head>
<body style="background-color: #EAE5E3">
    <ul class="float-list">
        <li class="clearfix"><a href="#">Link Here</a><span>Float Right</span></li>
        <li class="clearfix"><a href="#">Link Here</a><span>Float Right</span></li>
        <li class="clearfix"><a href="#">Link Here</a><span>Float Right</span></li>
        <li class="clearfix"><a href="#">Link Here</a><span>Float Right</span></li>
    </ul>
</body>
</html>