JSFiddle - React, Tailwind, and code Playground

by andersb79

HTML

<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flashcards</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div id="card"></div>

<script src="script.js"></script>

</body>
</html>

CSS

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}
#card {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  cursor: pointer;
  width: 300px;
}

JavaScript

document.addEventListener('DOMContentLoaded', (event) => {
  const flashcards = [
  { begrepp: 'Regler', förklaring: 'Vad man får eller inte får göra. regler har man till olika grupper och olika platser. Saker man får eller inte får göra.' },
  { begrepp: 'Lagar', förklaring: 'Nedskrivna regler som gäller alla. Lagar har bestämda straff.' },
  { begrepp: 'Normer', förklaring: 'Oskrivna regler som är självklara. De kan vara kulturella, religiösa och sociala.' },
  { begrepp: 'Rättsstat', förklaring: 'Sverige är en rättsstat. Lagen är lika för alla. En person kan inte bli fängslad hur som helst, en dömd har rätt att få sin dom omprövad i domstol, en person kan inte bli dömd för ett brott som inte finns.' },
  { begrepp: 'Stifta', förklaring: 'att skriva/ skapa lagar' },
  { begrepp: 'Påföljd', förklaring: 'Ett annat ord för straff' },
  { begrepp: 'Grundlagar', förklaring: 'Det är de viktigaste lagarna i landet och man kan inte skylla ifrån sig med att man inte visste om dem. Sverige har 4 grundlagar: regeringsformen, tryckfrihetsförordningen, yttrandefrihetsgrundlagen och successionsordningen.' },
  { begrepp: 'Juridik', förklaring: 'Läran om rättsreglerna och hur de ska användas.' },
  { begrepp: 'Straffmyndig', förklaring: 'När man är över 15 år och kan straffas för det brott du begår.' },
  { begrepp: 'Mörkertal', förklaring: 'Det är de brott som inte blir anmälda. Det kan vara för att någon familj har gjort det eller någon kompis. Man kan också vara rädd eller skämmas.' },
  { begrepp: 'Socioekonomi', förklaring: 'Hur miljön ser ut i ett område: socialt och ekonomiskt.' },
  { begrepp: 'Brott', förklaring: 'Handlingar som bryter mot lagar i samhället.' },
  { begrepp: 'Straff', förklaring: 'Det är konsekvenser av ett brott om man är skyldig. Till exempel: böter, samhällstjänst, fängelse eller villkorlig dom.' },
  { begrepp: 'Rättsprocess', förklaring: 'De steg som används för att hantera brott rättvist: 1. Anmälan 2. Utredning 3. Åtal 4. Rättegång 5. Dom och...