JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<!doctype html>
<html>
    <head>
        <title>CSS Brain Teaser</title>
        <!-- 
            Un exercice rigolo proposé par HTeuMeuLeu
            http://www.hteumeuleu.fr        
        -->
    </head>
    <body>
        <h1><i class="ok"></i><span class="line">Du texte HTML dynamique sur plusieurs lignes avec un fond qui suit bien et des marges autour.</span></h1>
    </body>
</html>

CSS

body { padding:50px; background:#2fa7ca; }
h1 { width:450px; font:bold 36px sans-serif; letter-spacing:-1px; color:#000; background:#FFF; padding:10px 20px;}
.line {background:white; position:relative; z-index:2;}
.ok {float:right; background:red; width:100%; height:100%; background:#2fa7ca;}