JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<!DOCTYPE html>
<html>
  <head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> -->
    <link href="css/styles.css" rel="stylesheet">
    <link href="css/fonts.css" rel="stylesheet">
    <script src="js/app.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Тестовое задание</title>
  </head>
  <body>
    <header>
      <div class="header-top">
        <div class="logo">
          <img src="images/logo.png">
          <span class="logo-name">PRINTE<span class="logo-bottom">Ваша типография</span></span>
        </div>
        <div class="header-description">
          <p class="header-description-top">Качественная оперативная цифровая, широкоформатная и сувенирная полиграфия!</p>
          <p class="header-description-bottom">Работаем с 9 до 18, вс и сб выходные </p>
        </div>
        <div class="header-private-room">
          <img class="user" src="images/user.png">
          <a href="#" class="private-room">Личный кабинет</a>
        </div>
        <div class="header-contacts">
          <section>
            <a class="email" href="#">[email protected]</a>
            <section class="header-contacts-bottom">
              <img class="facebook" src="images/facebook.png">
              <img class="phone" src="images/phone.png">
              <p class="phone-number">(044) 345-40-42</p>
              <img class="phones" src="images/phones.png">
            </section>
          </section>
        </div>
        <div class="header-cart">
          <img class="cart" src="images/cart.png">
        </div>
      </div>
    </header>
    <div class="nav-slider">
     ...

JavaScript

document.body.addEventListener(`click`, e => {
  if (e.target.tagName === "A") {
    e.preventDefault();
    alert(`Clicked ${e.target.textContent}. Thanks!`);
  }
});