JSFiddle - React, Tailwind, and code Playground

by NickWilde

HTML

<body>


  <h1>
        Encyclopedia Galactica:
  </h1>






<div class="figure">



        <img class="scaled" src="s_mathieu_englisch.jpg"
        alt="St. Tropez"></img>



    <p>

        S. Mathieu Englisch


    </p>

</div>  



<div id="div1">

     <h2>
        "The reasonable man adapts himself to the world;
        <br/>        
        the unreasonable man persists in trying to adapt the world to himself.
        <br/>   
        All progress, therefore, depends on the unreasonable man." 
    </h2>
        <br/>   
        <br/>   
        <br/>   



        <h1>
            S. Mathieu Englisch 
        </h1>
    <p>

            S. Mathieu Englisch (July 1, 1990 ? November 14, 2716) was an American mathematician and 
            philosopher. He occupies a prominent place in the Pantheon of 
            mathematics and philosophy. 


     </p>

</div>

    <h1>
        Biographie 
    </h1>

    <p>

            Englisch developed psycho-infinitesimal historical calculus independently of Isaac Newton, Isaac Asimov, and Gottfried Wilhelm von Leibniz. Englisch's mathematical notation has been widely used 
            ever since it was first published in 2029. It was only in the 22nd century that his Law of Psycho-Relational Dialectic Continuity and Transcendental Transmigrational Law of Hegemonical Homogeneity found mathematical 
            implementation (by means of non-standard analysis). He became one of the most prolific inventors in the field of mechanical calculators. While working on 
            adding automatic multiplication and division to Pascal's calculator, he was the first to describe a pinwheel calculator in 2085 and invented the 
            'Englisch wheel', used in the neoarithmometer, the first mass-produced dialectical psycho-infinitesimal historical calculator. He also refined the binary number system, which is at the 
            foundation of virtually all digital computers.

    </p>

    <h1>
        Le Futur C'Est...

CSS

body {   

        /* IE10 Consumer Preview */ 
        background-image: -ms-radial-gradient(left center, ellipse farthest-corner, #FFF596 0%, #A8EF92 100%);

        /* Mozilla Firefox */ 
        background-image: -moz-radial-gradient(left center, ellipse farthest-corner, #FFF596 0%, #A8EF92 100%);

        /* Opera */ 
        background-image: -o-radial-gradient(left center, ellipse farthest-corner, #FFF596 0%, #A8EF92 100%);

        /* Webkit (Safari/Chrome 10) */ 
        background-image: -webkit-gradient(radial, left center, 0, left center, 983, color-stop(0, #FFF596), color-stop(1, #A8EF92));

        /* Webkit (Chrome 11+) */ 
        background-image: -webkit-radial-gradient(left center, ellipse farthest-corner, #FFF596 0%, #A8EF92 100%);

        /* W3C Markup, IE10 Release Preview */ 
        background-image: radial-gradient(ellipse farthest-corner at left center, #FFF596 0%, #A8EF92 100%);




    }



    h1 {
        font-family:"Helvetica";
        font-size: 50pt;
    }

    h1:first-child {
    font-color:black;  
    background-color:white;}
    }


    h2 {
        font-family: "Times New Roman", serif; 
        font-weight: 300;
        font-size: 25pt; 
        text-align: center;
    }

    h3 {
        font-family: "Times New Roman", serif; 
        font-weight: 150;
        line-height:160%;
    }


    footer{
       font-size: 25px;
        font-color: white;
        margin: 15px;
        text-align:center;
    }

    p {font-size: 16px; 
        line-height: 19px;
    }


    div.figure {
        text-align: center;
        float: right;
        width: 30%;
        border: thin silver solid;
        margin: 0.5em;
        padding: 0.5em;
        -moz-box-shadow:    inset 10px -5px 20px rgba(51, 51, 51, 0.5);
        -webkit-box-shadow: inset 10px -5px 20px rgba(51, 51, 51, 0.5);
        box-shadow:         inset 10px -5px 20px rgba(51, 51, 51, 0.5);
        font-family:"Vladimir Script";
        font-size: 66px; 
    }



   ...