JSFiddle - React, Tailwind, and code Playground

by SpiceLab

HTML

<header>
  <h1>Willkommen auf meinem Bilderblog</h1> 
  <nav>
    <a href="#">Kontakt</a>
    <a href="#">Home</a>
    <a href="#">Bilder</a>
  </nav>
</header>
<main>
	<section>
	  <img src="//placehold.it/380x190" alt="">
    <ul>
      <li>Kamera: Canon EOS 700D</li>
      <li>Objektiv: Canon EF-S 18-55mm f/3.5-5.6 IS STM</li>
      <li>Blende: 22</li>
      <li>Belichtungszeit: 15 sec</li>
      <li>Brennweite: 23.0mm</li>
      <li>ISO: 100</li>
      <li><a href="mehr_simson">mehr dazu</a></li>
	  </ul>
  </section>
  <section>
    <img src="//placehold.it/380x190" alt="">
  </section>
</main>
<footer>
  <p>&copy; Foo Bar 2017</p>
</footer>

CSS

* {
  margin:0;
  padding:0;
}
body {
  padding-top:1.5rem;
}
header,
main,
footer {
  margin:0 auto;
	width:800px; 
}
header,
footer {
  background:#456;
  color:#ddd;
  text-align:center;
}
header h1 {
  margin-bottom:.5rem;
}
header nav {
  background:#123;
}
header nav a {
  text-decoration:none;
  color:#ddd;
  font-weight:900;
}
main {
	display:-webkit-flex;
	display:flex;
}
main section {
	flex:1;
}
main section:first-child {
  background:#cfdfef;
}
main section:last-child {
  background:#c0d0e0;
}
main section img,
main section ul {
	margin:10px;
}
main section ul {
  list-style-position:inside;
  font-size:.9rem;
}
footer {
  padding:.5rem 0;
  font-size:.8rem;
}