Tailwind-Elements/site/content/react/index.html

---
title: "TW Elements React Waiting List"
date: 2023-02-28T08:00:00+02:00
draft: false
main_title: "TW Elements React Waiting List"
subheading: "Top quality open-source UI Kit"
seo_title: "TW Elements - 500+ free Tailwind CSS components"
description: "A free collection of open source UI components, templates, sections & plugins for Tailwind CSS. Features dark mode and theming customization options."
image: "https://tecdn.b-cdn.net/img/components-big.jpg"
video: "https://www.youtube.com/watch?v=LvWh9o5sJmI"
url: "/react"
layout: product
hidden_sidenav: true
---

<!-- Section: Intro -->
<section
  class="mx-auto mb-[64px] mt-24 pb-[64px] min-[576px]:max-w-[540px] min-[768px]:max-w-[720px] min-[992px]:max-w-[960px] min-[1200px]:max-w-[1140px] min-[1400px]:max-w-[1320px]">
  <div class="grid grid-cols-1 items-center pt-6 lg:grid-cols-12">
    <div class="relative mx-3 text-center lg:col-span-5 lg:text-left">
      <div>
        <div class="flex items-center md:justify-center lg:justify-start">
          <svg
            aria-hidden="true"
            focusable="false"
            data-prefix="fas"
            data-icon="fa-react"
            class="ml-1 mr-1 h-20 w-20"
            role="img"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 512 512">
            <!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
            <path
              fill="currentColor"
              d="M418.2 177.2c-5.4-1.8-10.8-3.5-16.2-5.1.9-3.7 1.7-7.4 2.5-11.1 12.3-59.6 4.2-107.5-23.1-123.3-26.3-15.1-69.2.6-112.6 38.4-4.3 3.7-8.5 7.6-12.5 11.5-2.7-2.6-5.5-5.2-8.3-7.7-45.5-40.4-91.1-57.4-118.4-41.5-26.2 15.2-34 60.3-23 116.7 1.1 5.6 2.3 11.1 3.7 16.7-6.4 1.8-12.7 3.8-18.6 5.9C38.3 196.2 0 225.4 0 255.6c0 31.2 40.8 62.5 96.3 81.5 4.5 1.5 9 3 13.6 4.3-1.5 6-2.8 11.9-4 18-10.5 55.5-2.3 99.5 23.9 114.6 27 15.6 72.4-.4 116.6-39.1 3.5-3.1 7-6.3 10.5-9.7 4.4 4.3 9 8.4 13.6 12.4 42.8 36.8 85.1 51.7 111.2 36.6 27-15.6 35.8-62.9 24.4-120.5-.9-4.4-1.9-8.9-3-13.5 3.2-.9 6.3-1.9 9.4-2.9 57.7-19.1 99.5-50 99.5-81.7 0-30.3-39.4-59.7-93.8-78.4zM282.9 92.3c37.2-32.4 71.9-45.1 87.7-36 16.9 9.7 23.4 48.9 12.8 100.4-.7 3.4-1.4 6.7-2.3 10-22.2-5-44.7-8.6-67.3-10.6-13-18.6-27.2-36.4-42.6-53.1 3.9-3.7 7.7-7.2 11.7-10.7zM167.2 307.5c5.1 8.7 10.3 17.4 15.8 25.9-15.6-1.7-31.1-4.2-46.4-7.5 4.4-14.4 9.9-29.3 16.3-44.5 4.6 8.8 9.3 17.5 14.3 26.1zm-30.3-120.3c14.4-3.2 29.7-5.8 45.6-7.8-5.3 8.3-10.5 16.8-15.4 25.4-4.9 8.5-9.7 17.2-14.2 26-6.3-14.9-11.6-29.5-16-43.6zm27.4 68.9c6.6-13.8 13.8-27.3 21.4-40.6s15.8-26.2 24.4-38.9c15-1.1 30.3-1.7 45.9-1.7s31 .6 45.9 1.7c8.5 12.6 16.6 25.5 24.3 38.7s14.9 26.7 21.7 40.4c-6.7 13.8-13.9 27.4-21.6 40.8-7.6 13.3-15.7 26.2-24.2 39-14.9 1.1-30.4 1.6-46.1 1.6s-30.9-.5-45.6-1.4c-8.7-12.7-16.9-25.7-24.6-39s-14.8-26.8-21.5-40.6zm180.6 51.2c5.1-8.8 9.9-17.7 14.6-26.7 6.4 14.5 12 29.2 16.9 44.3-15.5 3.5-31.2 6.2-47 8 5.4-8.4 10.5-17 15.5-25.6zm14.4-76.5c-4.7-8.8-9.5-17.6-14.5-26.2-4.9-8.5-10-16.9-15.3-25.2 16.1 2 31.5 4.7 45.9 8-4.6 14.8-10 29.2-16.1 43.4zM256.2 118.3c10.5 11.4 20.4 23.4 29.6 35.8-19.8-.9-39.7-.9-59.5 0 9.8-12.9 19.9-24.9 29.9-35.8zM140.2 57c16.8-9.8 54.1 4.2 93.4 39 2.5 2.2 5 4.6 7.6 7-15.5 16.7-29.8 34.5-42.9 53.1-22.6 2-45 5.5-67.2 10.4-1.3-5.1-2.4-10.3-3.5-15.5-9.4-48.4-3.2-84.9 12.6-94zm-24.5 263.6c-4.2-1.2-8.3-2.5-12.4-3.9-21.3-6.7-45.5-17.3-63-31.2-10.1-7-16.9-17.8-18.8-29.9 0-18.3 31.6-41.7 77.2-57.6 5.7-2 11.5-3.8 17.3-5.5 6.8 21.7 15 43 24.5 63.6-9.6 20.9-17.9 42.5-24.8 64.5zm116.6 98c-16.5 15.1-35.6 27.1-56.4 35.3-11.1 5.3-23.9 5.8-35.3 1.3-15.9-9.2-22.5-44.5-13.5-92 1.1-5.6 2.3-11.2 3.7-16.7 22.4 4.8 45 8.1 67.9 9.8 13.2 18.7 27.7 36.6 43.2 53.4-3.2 3.1-6.4 6.1-9.6 8.9zm24.5-24.3c-10.2-11-20.4-23.2-30.3-36.3 9.6.4 19.5.6 29.5.6 10.3 0 20.4-.2 30.4-.7-9.2 12.7-19.1 24.8-29.6 36.4zm130.7 30c-.9 12.2-6.9 23.6-16.5 31.3-15.9 9.2-49.8-2.8-86.4-34.2-4.2-3.6-8.4-7.5-12.7-11.5 15.3-16.9 29.4-34.8 42.2-53.6 22.9-1.9 45.7-5.4 68.2-10.5 1 4.1 1.9 8.2 2.7 12.2 4.9 21.6 5.7 44.1 2.5 66.3zm18.2-107.5c-2.8.9-5.6 1.8-8.5 2.6-7-21.8-15.6-43.1-25.5-63.8 9.6-20.4 17.7-41.4 24.5-62.9 5.2 1.5 10.2 3.1 15 4.7 46.6 16 79.3 39.8 79.3 58 0 19.6-34.9 44.9-84.8 61.4zm-149.7-15c25.3 0 45.8-20.5 45.8-45.8s-20.5-45.8-45.8-45.8c-25.3 0-45.8 20.5-45.8 45.8s20.5 45.8 45.8 45.8z" />
          </svg>
          <h1 class="mb-8 mt-6 text-4xl font-bold">
            Tailwind CSS<br />
            <span class="text-primary dark:text-primary-400">with React</span>
          </h1>
        </div>
        <p class="text-sm font-medium text-gray-600 dark:text-gray-400">
          We have added a new
          <a
            href="https://tw-elements.com/docs/standard/integrations/react-integration/"
            class="text-primary"
            >React integration tutorial</a
          >
          for TW Elements.
        </p>

        <p class="mb-8 text-sm font-medium text-gray-600 dark:text-gray-400">
          If you want to be the first to know about the official release of the
          fully integrated and separate React package, sign up for our waiting
          list below!
        </p>

        <div class="">
          <ol class="text-md mb-10 text-gray-600 dark:text-gray-400">
            <li class="mb-4">
              <span
                class="mr-2 inline-block pb-1 align-middle text-primary dark:text-primary-400">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="3"
                  stroke="currentColor"
                  class="h-5 w-5">
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M4.5 12.75l6 6 9-13.5" />
                </svg> </span
              >TW Elements + React integration guide
            </li>
            <li class="mb-4">
              <span
                class="mr-2 inline-block pb-1 align-middle text-primary dark:text-primary-400">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="3"
                  stroke="currentColor"
                  class="h-5 w-5">
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M4.5 12.75l6 6 9-13.5" />
                </svg> </span
              >A dedicated UI Kit for Tailwind CSS + React
            </li>
            <li class="mb-4">
              <span
                class="mr-2 inline-block pb-1 align-middle text-primary dark:text-primary-400">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="3"
                  stroke="currentColor"
                  class="h-5 w-5">
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M4.5 12.75l6 6 9-13.5" />
                </svg> </span
              >Themes & templates for Tailwind CSS + React
            </li>
            <li class="mb-4">
              <span
                class="mr-2 inline-block pb-1 align-middle text-primary dark:text-primary-400">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="3"
                  stroke="currentColor"
                  class="h-5 w-5">
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M4.5 12.75l6 6 9-13.5" />
                </svg> </span
              >& more open source resources
            </li>
          </ol>

          <div class="">
            <!--ConvertKit script-->
            <script src="https://f.convertkit.com/ckjs/ck.5.js"></script>

            <!--ConvertKit form-->
            <form
              action="https://app.convertkit.com/forms/4899257/subscriptions"
              method="post"
              data-sv-form="4899257"
              data-uid="18cb83e909"
              data-format="inline"
              data-version="5"
              data-options='{"settings":{"after_subscribe":{"action":"message","success_message":"Success!\nNow check your email to confirm your subscription and enjoy React news.","redirect_url":""},"analytics":{"google":null,"fathom":null,"facebook":null,"segment":null,"pinterest":null,"sparkloop":null,"googletagmanager":null},"modal":{"trigger":"timer","scroll_percentage":null,"timer":5,"devices":"all","show_once_every":15},"powered_by":{"show":true,"url":"https://convertkit.com/features/forms?utm_campaign=poweredby&amp;utm_content=form&amp;utm_medium=referral&amp;utm_source=dynamic"},"recaptcha":{"enabled":true},"return_visitor":{"action":"show","custom_content":""},"slide_in":{"display_in":"bottom_right","trigger":"timer","scroll_percentage":null,"timer":5,"devices":"all","show_once_every":15},"sticky_bar":{"display_in":"top","trigger":"timer","scroll_percentage":null,"timer":5,"devices":"all","show_once_every":15}},"version":"5"}'>
              <div class="mb-4 flex gap-2 md:justify-center lg:justify-start">
                <!--ConvertKit alerts-->
                <ul
                  class="formkit-alert formkit-alert-error"
                  data-element="errors"
                  data-group="alert"></ul>

                <div
                  class="relative w-full max-w-[400px]"
                  data-te-input-wrapper-init>
                  <input
                    type="email"
                    required=""
                    id="email"
                    name="email_address"
                    placeholder="Enter your email"
                    class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-gray-200 dark:placeholder:text-gray-200 [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
                    required />
                  <label
                    for="tailwind-updates-form"
                    class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-gray-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-blue-600 peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-gray-200 dark:peer-focus:text-gray-200">
                    Your email address
                  </label>
                </div>
                <div>
                  <button
                    type="submit"
                    data-te-ripple-init
                    data-te-ripple-color="light"
                    class="inline-block min-w-[90px] rounded bg-blue-600 py-2.5 text-xs font-medium uppercase leading-tight text-white shadow-md transition duration-150 ease-in-out hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg">
                    Join now
                  </button>
                </div>
              </div>
            </form>

            <script src="https://cdn.jsdelivr.net/npm/tw-elements/dist/js/index.min.js"></script>
          </div>
          <p class="ml-2 text-sm text-gray-500 dark:text-gray-400">
            By subscribing you agree to receive the newsletter & commercial
            information from the data administrator StartupFlow s.c. Kijowska 7,
            Warsaw.
            <a
              href="https://mdbootstrap.com/general/privacy-policy/"
              class="text-blue-400 dark:text-blue-300"
              target="_blank">
              Policy
            </a>
          </p>
        </div>
      </div>
    </div>
    <div class="mx-3 mt-5 flex justify-center lg:col-span-7 lg:mt-0">
      <picture>
        <source
          srcset="https://tecdn.b-cdn.net/img/home/main.webp"
          type="image/webp" />
        <img
          src="https://tecdn.b-cdn.net/img/home/main.png"
          class="w-100"
          alt="" />
      </picture>
    </div>
  </div>
</section>
<!-- Section: Intro -->