JSFiddle - React, Tailwind, and code Playground

by Zsanett Tamás

HTML

<!DOCTYPE html>
<html lang="hu">

  <head>
    <meta charset="utf-8">
    <title>CodeCamp Házi</title>
    <meta name="author" content="Zsena">
    <meta name="description" content="CodeCamp Házi">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>

  <body>

    <header>
      <h1>Kedvenc filmek</h1>
    </header>
    <main>
      <section>
        <article class="left">
          <h2>Mátrix</h2>
          <hr>
          <p>
            Ahogy látjuk: Szürke, egyhangú világunk valóságos. A valóság: Ez a világ csak átverés, egy nagyszabású összeesküvés része, amelynek kiagyalói mesterséges intelligenciájú gépek. A hatalom az ő kezükben van és az emberek mind rabszolgák. Kemény! Eláll a
            lélegzeted a trükköktől, elszáll az agyad az akciójelenetektől és megáll az eszed a történettől. Keanu Reeves és Laurence Fishburne vezetik az emberiség felszabadításáért folytatott harcot a Mátrixban, a Wachowski fivérek (Fülledtség) korszakalkotó
            filmjében, amelyet nem lehet elégszer megnézni. A történet lebilincselő, a speciális effektusok páratlanul újszerűek - a film egyszerűen zseniális.
          </p>
          <a type="button" href="https://port.hu/adatlap/film/tv/matrix-the-matrix/movie-7241" class="btn">Filmadatlap</a>
        </article>
        <aside class="right">
          <figure>
            <img src="https://www.facethemusic.hu/files/o/ost-matrix--coloured--0848064008996.jpg" alt="Mátrix trilógia">
            <figcaption>Mátrix trilógia</figcaption>
          </figure>
        </aside>
      </section>
      <footer>
        <small>
          <code>&copy;</code> 2019<code> &ndash; </code>
          Made by <a href="https://www.facebook.com/zZSeNa">Zsena</a>
        </small>
      </footer>
    </main>

  </body>

</html>

CSS

html {
  background-color: #ddd;
  margin: 20px;
}

body {
  width: 80%;
  background-color: white;
  margin: auto;
  padding: 20px;
  border: 5px solid #000;
}

/* Header */

header h1 {
  text-align: center;
  padding-bottom: 20px;
}

/* Main */

section {
  width: 100%;
  display: flex;
}

.left {
  width: 50%;
  margin-right: 5px;
  background-color: #3fbaad;
  color: white;
  padding: 30px;
}

.right {
  background: #ddd;
  width: 50%;
  float: right;
}

.right img {
  width: 100%;
  border: 2px solid #3fbaad;
}

figcaption {
  background-color: #222;
  color: #fff;
  padding: 40px 2px;
  text-align: center;
  width: 100%;
  margin-top: -4px;
}

/* Button */

.btn {
  float: right;
  background-color: #fad430;
  border-radius: 15px;
  color: #fff;
  padding: 8px;
  text-decoration: none;
}

.btn:hover {
  background-color: #fff;
  color: #666;
}

/* Footer */

footer {
  width: 100%;
  text-align: center;
  padding: 30px;
}