JSFiddle - React, Tailwind, and code Playground

by dance2die

HTML

<head>
  <base target="_blank" >
</head>

<main>
  <a href="https://codepen.io/dance2die/pen/oRxRja">Another...</a>
  <section class="intro">
    <h1>The <code>base</code> Element</h1>
    <p>All your base are belong to us</p>
  </section>
  <pre><code>&lt;head&gt;
   &lt;base target="_blank"&gt;
 &lt;/head&gt;</code>
  </pre>
  <section>
    <p>You can set conditions for all links in the document, by stating them in <code>base</code>. In this example, I'm putting <code>target="_blank"</code> in <code>base</code>. Now all links will open in a new tab. Neat!</p>
    <p>You can also make all links point the same URL, I could have done <code>base href="https://some-url-here"</code> as well.</p>
    <p>One small tip: <code>base</code> shouldn't have a closing tag. 🤷🏻‍♀️</p>
    <p>More info <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base">here ></a></p>
  </section>
  <section class="links">
    <p>
      <a href="https://css-tricks.com/">This link will now be opened in a new tab.</a>
    </p>
    <p>
     <a href="https://sarah.dev/">This one too!</a>
    </p>
  </section>
</main>

CSS

body {
  font-family: "Muli", sans-serif;
  display: flex;
  justify-content: center;
  line-height: 1.4;
  background: #0e273c;
  color: #e8d7f1;
}

a,
a:visited,
a:active {
  color: #f1a7da;
  font-weight: bold;
}

main {
  margin: 0 17vw;
  max-width: 700px;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  flex-direction: column;
}

.intro {
  text-align: center;
  p {
    margin-top: -20px;
    font-style: italic;
    color: #a167a5;
  }
}

section {
  margin-top: 30px;
}

code {
  color: #d3bccc;
  padding: 2px 7px;
  background: #031727;
  border-radius: 3px;
  border: 1px solid #4c4a947d;
}

pre {
  border: 1px solid #4c4a947d;
  background: #031727;
  padding: 15px 20px 0 15px;
  code {
    border: none;
  }
}

.links {
  margin-bottom: 60px;
}