JSFiddle - React, Tailwind, and code Playground

by dara_tobi

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- include script -->  
    <script src="https://cdn.jsdelivr.net/gh/dara-tobi/pseudo-inline-styles@1.0.1/src/pseudo-inline-styles.js"></script>
    <title>PseudoInlineStyles Demo</title>
  </head>
  <body>
      
    <a href="#" id="primary-link" class="button large" style="
      :after: content: ' SOFTWARE';
      :focus: text-decoration: underline !important;
      :focus: border-radius: 10px;
      :focus-within: border-bottom: 2px solid crimson !important;
      :hover: background-color: red !important;
      :hover: color: black !important;
      :active: outline: 4px  solid  black;
      text-decoration: none;
      color: white;
      background-color: #005493;
      font-size: 1.5rem;
      text-align: center;
      padding: 20px;">12 HANDS</a>
    <!-- enable script -->
    <script>
      pseudoInlineStyles.enable({pseudoStyleTypes: ['focus-within', 'last-child'], override: true});
    </script>
  </body>
</html>