JSFiddle - React, Tailwind, and code Playground

by Maxim_Wolf

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<html>

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>

  <body>
    <scrtion class="card-details">
      <header class="card-details__header">
        <h2 class="card-details__caption">
          1 - Litmos Dojo - WHITE BELT 2.0 (long caption goes here but ellipses)
        </h2>
        <button class="card-details__escape" aria-lable="close">
          <span class="card-details__times" aria-hidden="true">&times;</span>
        </button>
      </header>
      <main class="card-details__main">
        <aside class="card-details__aside">
          <div class="card-details__pic" style="background-image:url(https://picsum.photos/232/160)">

          </div>
          <ul class="card-details__gamification">
            <li>Certificate</li>
            <li>Badge</li>
            <li>Points</li>
          </ul>
        </aside>
        <article class="card-details__article">
          <p>Formal logic, also known as symbolic logic or mathematical logic, is a branch of logic that deals with the formalization and analysis of logical systems. It provides a precise and rigorous framework for reasoning and inference, allowing us to study the structure and validity of arguments. Formal logic uses symbols and rules to represent and manipulate propositions, allowing us to analyze the logical relationships between them.</p>

        </article>
        <nav class="card-details_nav">
          <menu class="card-details_menu">
            <li><a href="#">Continue</a></li>
            <li><a href="#">Additional references</a></li>
            <li><a href="#">(2) Reviews 4.5</a></li>
          </menu>
        </nav>
        <details class="card-details__details" open>
          <summary class="card-details__summary">
            <h3 class="card-details__type">
              course
            </h3>
            <p...

CSS

body {
  padding: 0;
  margin: 0;
  background-color: #f0f0f0;
}

:root {
  --base-size: 1rem;
  --pic-width: 232px;
  --pic-height: 160px;
  --border-color: rgb(236, 238, 239);
  --accent-color: #0059C8;
  --highlight-color: #EDF0FF;
}

.card-details {
  display: inline-block;
  /*height: calc(10 * var(--base-size));*/
  width: 80vw;
  background-color: #fff;

  border: 1px solid #000;
}

.card-details__header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  background-color: #fff;
  padding: var(--base-size);
  line-height: calc(1.8 * var(--base-size));
  border-bottom: 1px solid var(--border-color);
}

.card-details__caption {
  padding: 0;
  margin: 0;
  background-color: #fff;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.card-details__escape {
  width: 32px;
  height: 32px;
  padding: 0px;
  margin: 0;
  font-size: 32px;
  background-color: transparent;
  border: 1px solid var(--border-color);
  display: grid;
  align-items: center;
  justify-items: center;
  line-height: 1em;
}

.card-details__escape:hover {
  background-color: var(--border-color);
  color: var(--accent-color);
}

.card-details__times {
  padding: 0;
  margin: 0;
}

.card-details__main {
  padding: var(--base-size);
  display: grid;
  grid-template-areas: "a b" "c c" "e e";
  grid-template-columns: auto 1fr;
}
.card-details__aside{
  grid-area: b;
  border: 1px solid var(--border-color);
  margin: calc(2.5 * var(--base-size));
  height: fit-content;
}
.card-details__article{
  position: relative;
  display: -webkit-box;
  grid-area: a;
  max-height: 300px;
  -webkit-line-clamp: 15;
  -webkit-box-orient: vertical;  
  overflow: clip;
  text-overflow: ellipsis;
}
/*.card-details__article::before{
  position: absolute;
  content: 'show more >';
  padding: 0 1rem;
  background-color: #fff;
  color: var(--accent-color);
  right: 0;
  bottom: 0;
}
*/
/*.card-details__article::after{
  position: absolute;
  content: '';
  width: 3em;
 ...