Modal

Modal components enables user to display the details as required in a Popup/Modal format.

Code


                <div >
                <div class="card-container center gap primary-shadow card-modal">
                    <h6 class="card-badge ">X</h6>
                    <h3 class="colors-textDark card-text">Subscribe Now</h3>
                    <p>Subscribe to the best newsletter in town.</p>
                    <div class="flex flex-col gap-10">
                        <input type="text" placeholder="Enter Email" class="input-box">
                        <input type="text" placeholder="Enter Name" class="input-box">
            
                        <button class="button primary-outline colors-textDark primary-shadow">
                          Sign in
                        </button>
                    </div>
                </div>

X

Access your Account

Code


              <div >
    <div class="card-container center gap card-long clickable">
      <h6 class="card-badge ">X</h6>
      <h2 class="colors-textDark card-text">Access your Account</h2>

      <button class="button button-primary colors-textLight primary-shadow">
        Sign in
      </button>
      <button class="button button-primary colors-textLight primary-shadow">
        Signout
      </button>
    </div>
  </div>