JSFiddle - React, Tailwind, and code Playground

by Aliyu S

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="utf-8">
      <title>Utopian-io | Beautiful and sweet JavaScript alerts using SweetAlert.JS</title>
      <link href="css/bootstrap.min.css" rel="stylesheet">      
  </head>

<body style="padding-top: 5rem;">
  <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <div class="container">
      <a class="navbar-brand" href="#">Utopian-io</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>      
    </div>
  </nav>

  <main role="main" class="container">
    <h1>Utopian-io Contribution</h1>  
    <p class="lead">A beautiful and sweet replacement for JavaScript Alert</p>         
      <div class="container welcome-div">      
        <div class="row">
          <div class="col-md-6 text-center">
            <button class="btn btn-lg btn-primary" onclick="sweetAlert()">SweetAlert</button>
          </div>
          <div class="col-md-6 text-center">
             <button class="btn btn-lg btn-success" onclick="defualtAlert()">DefaultAlert</button>
          </div>
        </div>
    </div>   
  </main>    

    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <script type="text/javascript">
    function sweetAlert() {
      swal("What do you want to do?", {
        buttons: {
          cancel: "Cancel!",
          catch: {
            text: "Submit!",
            value: "catch",
          },
          register: true,
          try: true,
        },
      })
      .then((value) => {
        switch (value) {
       
          case "register":
            swal("Type username here:", {
              content: "input",
            })
           ...