JSFiddle - React, Tailwind, and code Playground

by yiiBoy

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Гарри Поттер и философский камень – Читай онлайн</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
        header, nav, main, section, article, aside, footer { padding: 20px; }
        header { background: #3a3a3a; color: white; text-align: center; }
        nav { background: #5a5a5a; color: white; text-align: center; }
        nav a { color: white; margin: 0 10px; text-decoration: none; }
        main { display: flex; gap: 20px; }
        section { flex: 3; }
        aside { flex: 1; background: #f4f4f4; padding: 15px; }
        article { margin-bottom: 20px; }
        footer { background: #3a3a3a; color: white; text-align: center; }
        .book-cover { width: 100%; max-width: 250px; }
    </style>
</head>
<body>

    <!-- Заголовок сайта -->
    <header>
        <h1>BookReader 📚</h1>
        <p>Твоя онлайн-библиотека</p>
    </header>

    <!-- Навигация -->
    <nav>
        <a href="#">Главная</a>
        <a href="#">Каталог</a>
        <a href="#">Популярное</a>
        <a href="#">Контакты</a>
    </nav>

    <!-- Основной контент -->
    <main>
        <!-- Информация о книге -->
        <section>
            <article>
                <h2>📖 Гарри Поттер и философский камень</h2>
                <p><strong>Автор:</strong> Дж. К. Роулинг</p>
                <img src="harry-potter-cover.jpg" alt="Обложка книги" class="book-cover">
                <p><strong>Жанр:</strong> Фэнтези</p>
                <p><strong>Описание:</strong> История о мальчике, который узнает, что он волшебник и отправляется в школу Хогвартс.</p>
            </article>

            <!-- Чтение книги -->
            <article>
                <h3>Глава 1. Мальчик, который выжил</h3>
                <p>Мистер и миссис Дурсли из дома номер четыре по Тисовой улице гордились тем, что были абсолютно...