<div class="container">
  <!-- 1. Address Element -->
  <div>
    <p>Address Element</p>
    <address>
      <a href="mailto:kiran2345raj@gmail.com">kiranraj</a>
      <p>Location : Kerala, India</p>
    </address>
  </div>

  <!-- 2. Data Element -->

  <div>
    <p>Data Element</p>
    <ul>
      <li><data value="1972">C Language</data></li>
      <li><data value="1979">C++ Language</data></li>
      <li><data value="1995">JavaScript</data></li>
    </ul>
  </div>

  <!-- 3. Datalist Element-->

  <div>
    <p>Datalist Element</p>
    <label for="SELECT">Pick a country</label>
    <input list="country" id="SELECT" />

    <datalist id="country">
      <option value="INDIA">
      <option value="USA">
      <option value="UK">
      <option value="GERMANY">
      <option value="RUSSIA">
    </datalist>
  </div>

  <!-- 4. Bidirectional Isolation Element -->

  <div>
    <p>Bidirectional Isolation Element</p>
    <p><span>Hello World </span><bdi>مرحبا بالعالم</bdi></p>
  </div>

  <!-- 5. Bidirectional Override Element -->

  <div>
    <p>Bidirectional Override Element</p>
    <p>Hello World <bdo dir="rtl">Hello World</bdo></p>
  </div>

  <!-- 6. Code Element -->

  <div>
    <p>Code Element</p>
    <p>To install create-react-app use <code>npx create-react-app</code>.</p>
  </div>

  <!-- 7. Description Element -->

  <div>
    <p>Description Element</p>
    <dl>
      <dt>bdi tag</dt>
      <dd>The bdi tag help to display part of the text in the opposite direction</dd>
      <dt>bdo tag</dt>
      <dd>The bdo tag overrides the default text direction.</dd>
    </dl>
  </div>

  <!-- 8. Keyboard input Element -->

  <div>
    <p>Keyboard input Element</p>
    <p>Use <kbd>Ctrl</kbd> + <kbd>S</kbd> to save your work.</p>
  </div>

  <!-- 9. Mark Element -->

  <div>
    <p>Mark Element</p>
    <p>Use <mark>Ctrl+ S</mark> to save your work.</p>
  </div>

  <!-- 10. Meter Element -->

  <div>
    <p>Meter Element</p>

    <label for="Mark">Mark:</label>
    <meter id="Mark" min="0" max="100" value="80"></meter>
  </div>

  <!-- 11. Noscript Element -->
  <div>
    <p>Noscript Element</p>
    <noscript>
      <p>JavaScript is disabled in the browser</p>
    </noscript>
  </div>

  <!-- 12. Object -->

  <div>
    <p>Object Element</p>

    <object type="image/jpg" data="https://images.unsplash.com/photo-1448375240586-882707db888b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80" width="250" height="200">
    </object>
  </div>

  <!-- 13. Output Element-->

  <div>
    <p>Output Element</p>

    <form oninput="sum.value = parseInt(num1.value) + parseInt(num2.value)">
      <input type="number" name="num1" value="4"> +
      <input type="number" name="num2" value="7"> =
      <output name="sum">11</output>
    </form>
  </div>

  <!-- 14. Progress Element -->

  <div>
    <p>Progress Element</p>

    <progress id="file" max="100" value="70"> 70% </progress>
  </div>

  <!-- 15. sub element -->

  <div>
    <p>sub Element</p>

    <p>H<sub>2</sub>O</p>
  </div>

  <!-- 16. sup element -->

  <div>
    <p>sup Element</p>

    <p> (x + y)<sup>2</sup> = x<sup>2</sup> + 2xy + y<sup>2</sup></p>
  </div>

  <!-- 17. Details Element -->

  <div>
    <p>Details Element</p>

    <details>
      <summary>Address</summary>
      <a href="mailto:kiran2345raj@gmail.com">kiranraj@gmail.com</a>
      <p>Location : Kerala, India</p>
    </details>
  </div>

  <!-- 18. Time Element -->
  <div>
    <p>Time Element</p>
    <p>
      The IPL starts at <time datetime="2021-05-04T20:00">20:00</time>.
    </p>
  </div>

  <!-- 19. var Element -->
  <div>
    <p>Var Element</p>
    <p>let <var>x</var> = 10</p>
  </div>

  <!-- 20. wbr Element -->
  <div class="wbr">
    <p>Wbr Element</p>
    <p>helloworld,welcome</p>
    <p>hello<wbr>world,<wbr>welcome</p>
  </div>

  <!-- 21. abbr Element -->
  <div class="wbr" id="23">
    <p>Abbr Element</p>
    <p>
      <abbr title="kiran raj r">krr</abbr>
    </p>
  </div>

  <!-- 22. pre Element -->
  <div>
    <p>Pre Element</p>
    <pre><code>
function greet(name) {
    console.log('Good Morning ' + name + '!');
}

sayHello('kiran raj');
</code></pre>
  </div>

  <!-- 23. q and cite Element -->
  <div>
    <p>q and cite Elements</p>
    <q>Imagination is more important than knowledge.
      <cite>Albert Einstein</cite></q>
  </div>

  <!--  24. samp element  -->
  <div>
    <p>samp Elements</p>
    <p> x + y gives <samp>undefined</samp> </p>
  </div>

  <!--   <dialog open>
    <p>Greetings, one and all!</p>
  </dialog>
</div> -->
* {
  font-size: 18px;
  padding: 0;
  margin: 0;
}

a {
  color: #fff;
}

.container {
  width: 100vw;
  height: auto;
  display: flex;
  align-item: center;
  margin: auto;
  counter-reset: id1;
}

div {
  padding: 40px;
  background-color: rgba(1, 1, 1, 0.9);
  margin-bottom: 20px;
  height: auto;
  width: 60%;
  display: flex;
  color: #fff;
  flex-direction: column;
  /*   justify-content: center; */
  align-items: center;
  box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset,
    rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
    rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}
div > p:nth-child(1) {
  margin-bottom: 25px;
  color: red;
  font-size: 24px;
  position: relative;
  counter-increment: id1;
}

div > p:nth-child(1):before {
  position: absolute;
  width: 100%;
  height: 100%;
  content: counter(id1) ".";
  display: block;
  color: #fff;
  left: -50px;
  top: -10px;
  padding: 10px;
}

.wbr p:nth-child(2),
.wbr p:nth-child(3) {
  width: 100px;
  margin-bottom: 10px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.