JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<h1>title</h1>

<ul>
    <li>Etusivu</li>
    <li>Välisivu</li>
    <li>Takasivu</li>
</ul>

<div id="content">

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis voluptas deleniti facere nihil et doloribus sequi ut rerum itaque vel. Consequatur, ea sequi reprehenderit corporis accusamus dolorum doloremque repellat. Autem, illo, fugiat. Repellendus, nobis, aspernatur, placeat, eligendi odit molestiae rerum explicabo incidunt ad a quas delectus cumque id repellat aliquid unde at neque voluptates temporibus accusamus quaerat. Nesciunt, nemo, ea adipisci minus suscipit veniam modi beatae ipsum est id odit aut consectetur. Itaque, id, vel, accusantium, voluptate velit nostrum eaque debitis atque omnis veniam rerum maiores quidem odit eligendi aperiam tempora necessitatibus quia. Placeat, necessitatibus velit fugit nihil eos beatae!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis voluptas deleniti facere nihil et doloribus sequi ut rerum itaque vel. Consequatur, ea sequi reprehenderit corporis accusamus dolorum doloremque repellat. Autem, illo, fugiat. Repellendus, nobis, aspernatur, placeat, eligendi odit molestiae rerum explicabo incidunt ad a quas delectus
        cumque id repellat aliquid unde at neque voluptates temporibus accusamus quaerat. Nesciunt, nemo, ea adipisci minus suscipit veniam modi beatae ipsum est id odit aut consectetur. Itaque, id, vel, accusantium, voluptate velit nostrum eaque debitis atque omnis veniam rerum maiores quidem odit eligendi aperiam tempora necessitatibus quia. Placeat, necessitatibus velit fugit nihil eos beatae!
        <img src="http://placekitten.com/g/300/300" alt=""/>
        <img src="http://placekitten.com/g/500/300"  alt=""/>
    </p>
    <p>Lorem ipsum dolor sit amet, consecteur adipisicing elit. Quis voluptas deleniti facere nihil et doloribus sequi ut rerum itaque vel. Consequatur, ea sequi reprehenderit corporis accusamus dolorum doloremque repellat. Autem, illo, fugiat....

CSS

body {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

/* 
    Käytännössä: Jos parent element on pienempi kun kuvan leveys, niin kuvan leveys = parent elementin leveys  
    Suomeksi: Jos selaimen ikkuna on pienempi kun kuvan oikea leveys, kuva venyy selaimen reunasta reunaan niin että kuva pysyy content alueen sisällä pienessäkin näkymässä.
*/
img { max-width: 100%; }

ul, li {
    float: left;
    list-style: none;
    margin: 0px;
    padding: 0px;
}

ul {
    width: 100%;
    background: #333;
    color: #fff;
}
li { padding: 5px; }

#content { 
    float: left; 
    width: 100%;
    max-width: 500px;
}


@media only screen and ( max-width: 400px ) {
    
    h1,
    ul { text-align: center; }
    
    ul li { width: 100%; clear: both; padding: 10px 0px; }
}

JavaScript

$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1.0 ,user-scalable=yes" />');