JSFiddle - React, Tailwind, and code Playground

by matox

HTML

<style>
  * {
    font-family: Verdana, san-serif;
  }

  .btn {
    font-family: Verdana, san-serif;
    color: white;
    margin-top: 8px;
    padding: 8px 24px;
    font-size: 12px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 400;
  }
  
  .btn:focus, .btn:hover, .btn:visited {
    text-decoration: none;
    color: #fff;
  }

  .btn-blue {
    background: #111;
  }

  .btn-red {
    background: #db0913;
    font-size: 14px;
    padding: 12px 32px;
  }

  li {
    margin-bottom: 4px;
  }

  .action-box {
    margin: 0px 10px;
    padding: 20px 10px;
    //border: 2px solid #db0913;
    border-radius: 8px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }

  table {
    margin: 0 auto;
  }
</style>
<div class="product">
  <h1 class="h1" style="text-align: center;">
  <font color="#db0913"><span style="font-size:24px">AKCIJA - CANON TISKALNIKI</span></font><br />

  <strong style="color:rgb(80, 80, 80); font-size:14px"><span style="font-size:32px">7 let brez stro&scaron;kov vzdrževanja*</span></strong></h1>

&nbsp;



<table style="margin: 0 auto; border-collapse: collapse; border: 0 solid grey; font-family: Arial, Helvetica, sans-serif; border-bottom: 1px solid #ccc;" width="600dpi">

  <tbody>

    <tr style="border-collapse: collapse; border: 0 solid; align: middle">

      <td colspan="2">
        <span style="color:#000000; font-family:calibri,arial,helvetica,sans-serif; font-size:18px;">Multifunkcijska naprava <strong><br>CANON MF421dw + DARILO </strong>(dodatni črni toner)</span></td>

    </tr>

    <tr>

      <td style="text-align: center;" width="40%"><a href="http://trgovina.birox.si/katalog/33101002A/" target="_blank"><img src="https://trgovina.birox.si/media/birox/33101002A_200.jpg" style="border: 0px; width: 275px; " /></a></td>

      <td width="60%">
        <p style="text-align: left; margin-left: 20px; margin-bottom: 0;"><span style="color:#000000; font-size:14px;...