### Navigation Bar with Get Started Button

Source: https://github.com/marsx-dev/floatui/blob/main/componentsDB/heroes/heroes-8cbb7080120b.mdx

This snippet demonstrates a responsive navigation bar. It includes navigation links and a prominent 'Get started' button styled with background color and hover effects. The navigation is designed to adapt to different screen sizes.

```html
<nav class="relative px-4 py-4 flex justify-between items-center bg-white">
    <a class="text-3xl font-bold transition duration-100 hover:text-indigo-500" href="#">
      Logo
    </a>
    <div class="lg:hidden">
      <button class="navbar-burger flex items-center p-3">
        <svg class="block h-4 w-4" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <title>Mobile Menu</title>
          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
        </svg>
      </button>
    </div>
    <ul class="hidden absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 lg:flex lg:mx-auto lg:flex lg:items-center lg:w-auto lg:space-x-6">
      <li><a class="text-sm text-gray-500 hover:text-indigo-600" href="#">Customers</a></li>
      <li class="text-gray-300">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" class="w-4 h-4" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v3m0 3v3m0 3V17M5 12h14M6.317 5.683L7.731 7.107M17.071 17.071L15.657 15.657M12 12l-2.121-2.121M7.107 17.071L5.693 15.657M17.071 5.683l-1.414 1.414M12 12l-2.121-2.121" />
        </svg>
      </li>
      <li><a class="text-sm text-gray-500 hover:text-indigo-600" href="#">About Us</a></li>
      <li class="text-gray-300">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" class="w-4 h-4" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v3m0 3v3m0 3V17M5 12h14M6.317 5.683L7.731 7.107M17.071 17.071L15.657 15.657M12 12l-2.121-2.121M7.107 17.071L5.693 15.657M17.071 5.683l-1.414 1.414M12 12l-2.121-2.121" />
        </svg>
      </li>
      <li><a class="text-sm text-gray-500 hover:text-indigo-600" href="#">Careers</a></li>
      <li class="text-gray-300">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" class="w-4 h-4" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v3m0 3v3m0 3V17M5 12h14M6.317 5.683L7.731 7.107M17.071 17.071L15.657 15.657M12 12l-2.121-2.121M7.107 17.071L5.693 15.657M17.071 5.683l-1.414 1.414M12 12l-2.121-2.121" />
        </svg>
      </li>
      <li><a class="text-sm text-gray-500 hover:text-indigo-600" href="#">Contact</a></li>
    </ul>
    <div class="hidden lg:inline-block">
      <a
        class="py-2 px-6 bg-indigo-600 hover:bg-indigo-700 text-sm text-white font-bold rounded-xl transition duration-200"
        href="javascript:void(0)"
        >Get started</a
      >
    </div>
  </nav>
  <div class="navbar-menu relative z-50 hidden">
    <div class="navbar-backdrop content-[''] fixed inset-0 opacity-20 bg-gray-800"></div>
    <nav class="fixed top-0 left-0 bottom-0 flex flex-col w-5/6 max-w-sm py-6 px-6 bg-white border-r overflow-y-auto">
      <div class="flex items-center mb-8">
        <a class="mr-auto text-3xl font-bold transition duration-100 hover:text-indigo-500" href="#">
          Logo
        </a>
        <button class="navbar-close">
          <svg class="h-6 w-6 text-gray-400 cursor-pointer hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </button>
      </div>
      <div>
        <ul>
          <li class="mb-1">
            <a class="block p-4 text-sm font-semibold text-gray-400 hover:bg-indigo-50 hover:text-indigo-600 rounded" href="#">Customers</a>
          </li>
          <li class="mb-1">
            <a class="block p-4 text-sm font-semibold text-gray-400 hover:bg-indigo-50 hover:text-indigo-600 rounded" href="#">About Us</a>
          </li>
          <li class="mb-1">
            <a class="block p-4 text-sm font-semibold text-gray-400 hover:bg-indigo-50 hover:text-indigo-600 rounded" href="#">Careers</a>
          </li>
          <li class="mb-1">
            <a class="block p-4 text-sm font-semibold text-gray-400 hover:bg-indigo-50 hover:text-indigo-600 rounded" href="#">Contact</a>
          </li>
        </ul>
      </div>
      <div class="mt-auto">
        <div class="pt-6">
          <a
            class="block px-4 py-3 mb-3 w-full text-center text-sm font-semibold text-indigo-500 transition duration-200 border border-gray-200 hover:border-gray-300 rounded-xl"
            href="#"
            >Learn More</a
          >
          <a
            class="block px-4 py-3 mb-3 w-full text-center text-sm font-semibold text-white bg-indigo-600 hover:bg-indigo-700 rounded-xl transition duration-200"
            href="#"
            >Get started</a
          >
        </div>
        <p class="px-4 text-xs text-center text-gray-400">
          We’re hiring. See our careers page for more details.
        </p>
      </div>
    </nav>
  </div>
```

--------------------------------

### Float UI Pure CSS Setup

Source: https://github.com/marsx-dev/floatui/blob/main/posts/getting-started.mdx

This CSS code provides the necessary base styles for Float UI components to function correctly without requiring a Tailwind CSS setup. It resets default browser styles and applies consistent formatting.

```css
*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: currentColor;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
*/

html {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  tab-size: 4;
  /* 3 */
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr[title] {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font family by default.
2. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=195016)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

```

--------------------------------

### Create Account Form HTML Structure

Source: https://github.com/marsx-dev/floatui/blob/main/componentsDB/authentication/authentication-ccedb97166eb.mdx

This snippet provides the HTML structure for a 'Create Account' form. It includes the main layout, header with logo and text, input fields for name, email, and password, a submit button, and a 'Continue with Google' button. The HTML is designed to be styled with Tailwind CSS.

```html
<main
  class="w-full h-screen flex flex-col items-center justify-center bg-gray-50 sm:px-4"
>
  <div class="w-full space-y-6 text-gray-600 sm:max-w-md">
    <div class="text-center">
      <img src="https://floatui.com/logo.svg" width="150" class="mx-auto" />
      <div class="mt-5 space-y-2">
        <h3 class="text-gray-800 text-2xl font-bold sm:text-3xl">
          Create an account
        </h3>
        <p class="">
          Already have an account?
          <a
            href="javascript:void(0)"
            class="font-medium text-indigo-600 hover:text-indigo-500"
            >Log in</a
          >
        </p>
      </div>
    </div>
    <div class="bg-white shadow p-4 py-6 sm:p-6 sm:rounded-lg">
      <form onSubmit="event.preventDefault()" class="space-y-5">
        <div>
          <label class="font-medium">Name</label>
          <input
            type="text"
            required
            class="w-full mt-2 px-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg"
          />
        </div>
        <div>
          <label class="font-medium">Email</label>
          <input
            type="email"
            required
            class="w-full mt-2 px-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg"
          />
        </div>
        <div>
          <label class="font-medium">Password</label>
          <input
            type="password"
            required
            class="w-full mt-2 px-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg"
          />
        </div>
        <button
          class="w-full px-4 py-2 text-white font-medium bg-indigo-600 hover:bg-indigo-500 active:bg-indigo-600 rounded-lg duration-150"
        >
          Create account
        </button>
      </form>
      <div class="mt-5">
        <button
          class="w-full flex items-center justify-center gap-x-3 py-2.5 mt-5 border rounded-lg text-sm font-medium hover:bg-gray-50 duration-150 active:bg-gray-100"
        >
          <img
            src="https://raw.githubusercontent.com/sidiDev/remote-assets/7cd06bf1d8859c578c2efbfda2c68bd6bedc66d8/google-icon.svg"
            alt="Google"
            class="w-5 h-5"
          />
          Continue with Google
        </button>
      </div>
    </div>
  </div>
</main>
```

--------------------------------

### Get Started Button with Arrow Icon (HTML/SVG)

Source: https://github.com/marsx-dev/floatui/blob/main/componentsDB/heroes/heroes-40b102808fb4.mdx

A 'Get started' button styled with Tailwind CSS, featuring an arrow icon. This component is typically used for calls to action.

```html
<a
                class="flex items-center justify-center gap-x-1 py-2 px-4 text-white font-medium bg-sky-500 hover:bg-sky-400 active:bg-sky-600 duration-150 rounded-full md:inline-flex"
                >
                  Get started
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 20 20"
                    fill="currentColor"
                    class="w-5 h-5"
                  >
                    <path
                      fill-rule="evenodd"
                      d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
                      clip-rule="evenodd"
                    />
                  </svg>
                </a>
```

--------------------------------

### HTML Structure for Navigation with Search

Source: https://github.com/marsx-dev/floatui/blob/main/componentsDB/sidebars/sidebars-1f142eb36aba.mdx

This HTML snippet demonstrates a fixed navigation bar with a search input. It uses Alpine.js (`x-data`) for state management and includes a logo and search icon. The structure is designed for responsiveness.

```html
<div x-data="{
    lessons: {
        rustLessons: [
            { name: 'Introduction to Rust', href: 'javascript:void(0)' },
            { name: 'Installing and Setting up Rust', href: 'javascript:void(0)' },
            { name: 'Basic Syntax and Data Types', href: 'javascript:void(0)' },
            { name: 'Control Flow Statements', href: 'javascript:void(0)' },
            { name: 'Functions and Modules', href: 'javascript:void(0)' },
            { name: 'Ownership and Borrowing', href: 'javascript:void(0)' },
            { name: 'Structs and Enums', href: 'javascript:void(0)' },
            { name: 'Traits and Generics', href: 'javascript:void(0)' }
        ],
        cargoLessons: [
            { name: 'Introduction to Cargo', href: 'javascript:void(0)' },
            { name: 'Installing and Configuring Cargo', href: 'javascript:void(0)' },
            { name: 'Basic Cargo Commands', href: 'javascript:void(0)' },
            { name: 'Working with Dependencies', href: 'javascript:void(0)' },
            { name: 'Rust Workspaces with Cargo', href: 'javascript:void(0)' },
            { name: 'Ownership and Borrowing', href: 'javascript:void(0)' },
            { name: 'Structs and Enums', href: 'javascript:void(0)' },
            { name: 'Traits and Generics', href: 'javascript:void(0)' }
        ]
    }
}">
    <nav class="fixed z-40 top-0 left-0 w-full h-full border-r bg-white space-y-8 overflow-auto sm:w-80">
        <div class="sticky top-0 space-y-8 bg-white">
            <div class='h-20 flex items-center px-4 border-b md:px-8'>
                <a href='javascript:void(0)' class='flex-none'>
                    <img src="https://floatui.com/logo.svg" width="140" class="mx-auto" />
                </a>
            </div>
            <div class='px-4 md:px-8'>
                <div class='relative w-full'>
                    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='w-5 h-5 text-gray-400 absolute left-3 inset-y-0 my-auto'>
                        <path fill-rule='evenodd' d='M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z' clip-rule='evenodd'/>
                    </svg>
                    <input type='email' class='w-full pl-12 pr-3 py-2 bg-white text-sm text-gray-500 bg-transparent outline-none border ring-blue-600 focus:ring-2 shadow-sm rounded-lg duration-200' placeholder='Search...' />
                </div>
            </div>
        </div>
    </nav>
</div>
```

--------------------------------

### Display Centered CTA with Two Links in Svelte

Source: https://github.com/marsx-dev/floatui/blob/main/componentsDB/cta-sections/cta-sections-89d412ecb171.mdx

This Svelte component displays a centered Call to Action section with a heading, descriptive text, and two links: 'Get started' and 'Learn more'. The 'Get started' link is styled as a primary button with a dark background, while 'Learn more' is styled as a secondary link with a border.

```svelte
<section class="py-14">
    <div class="max-w-screen-xl mx-auto px-4 md:text-center md:px-8">
        <div class="max-w-xl md:mx-auto">
            <h3 class="text-gray-800 text-3xl font-semibold sm:text-4xl">
                Build the future with us
            </h3>
            <p class="mt-3 text-gray-600">
                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat non proident.
            </p>
        </div>
        <div class="flex gap-3 items-center mt-4 md:justify-center">
            <a href="javascript:void(0)" class="inline-block py-2 px-4 text-white font-medium bg-gray-800 duration-150 hover:bg-gray-700 active:bg-gray-900 rounded-lg shadow-md hover:shadow-none">
                Get started
            </a>
            <a href="javascript:void(0)" class="inline-block py-2 px-4 text-gray-800 font-medium duration-150 border hover:bg-gray-50 active:bg-gray-100 rounded-lg">
                Learn more
            </a>
        </div>
    </div>
</section>
```

--------------------------------

### Sign-up Form with Social Login

Source: https://github.com/marsx-dev/floatui/blob/main/componentsDB/authentication/authentication-fff7c32ba871.mdx

A complete sign-up form with fields for name, email, and password, along with options to sign up using Google, Twitter, or GitHub. Includes a 'Log in' link for existing users.

```html
<div class="flex-1 flex items-center justify-center h-screen">
    <div
      class="w-full max-w-md space-y-8 px-4 bg-white text-gray-600 sm:px-0"
    >
      <div class="">
        <img
          src="https://floatui.com/logo.svg"
          width="150"
          class="lg:hidden"
        />
        <div class="mt-5 space-y-2">
          <h3 class="text-gray-800 text-2xl font-bold sm:text-3xl">
            Sign up
          </h3>
          <p class="">
            Already have an account?
            <a
              href="javascript:void(0)"
              class="font-medium text-indigo-600 hover:text-indigo-500"
              >Log in</a
            >
          </p>
        </div>
      </div>
      <div class="grid grid-cols-3 gap-x-3">
        <button
          class="flex items-center justify-center py-2.5 border rounded-lg hover:bg-gray-50 duration-150 active:bg-gray-100"
        >
          <img
            src="https://raw.githubusercontent.com/sidiDev/remote-assets/7cd06bf1d8859c578c2efbfda2c68bd6bedc66d8/google-icon.svg"
            alt="Google"
            class="w-5 h-5"
          />
        </button>
        <button
          class="flex items-center justify-center py-2.5 border rounded-lg hover:bg-gray-50 duration-150 active:bg-gray-100"
        >
          <img
            src="https://raw.githubusercontent.com/sidiDev/remote-assets/f7119b9bdd8c58864383802fb92c7fc3a25c0646/twitter-icon.svg"
            alt="Twitter"
            class="w-5 h-5"
          />
        </button>
        <button
          class="flex items-center justify-center py-2.5 border rounded-lg hover:bg-gray-50 duration-150 active:bg-gray-100"
        >
          <img
            src="https://raw.githubusercontent.com/sidiDev/remote-assets/0d3b55a09c6bb8155ca19f43283dc6d88ff88bf5/github-icon.svg"
            alt="Github"
            class="w-5 h-5"
          />
        </button>
      </div>
      <div class="relative">
        <span class="block w-full h-px bg-gray-300"></span>
        <p
          class="inline-block w-fit text-sm bg-white px-2 absolute -top-2 inset-x-0 mx-auto"
        >
          Or continue with
        </p>
      </div>
      <form onSubmit="event.preventDefault()" class="space-y-5">
        <div>
          <label class="font-medium">Name</label>
          <input
            type="text"
            required
            class="w-full mt-2 px-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg"
          />
        </div>
        <div>
          <label class="font-medium">Email</label>
          <input
            type="email"
            required
            class="w-full mt-2 px-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg"
          />
        </div>
        <div>
          <label class="font-medium">Password</label>
          <input
            type="password"
            required
            class="w-full mt-2 px-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg"
          />
        </div>
        <button
          class="w-full px-4 py-2 text-white font-medium bg-indigo-600 hover:bg-indigo-500 a"
        >
          Sign up
        </button>
      </form>
    </div>
  </div>
```

--------------------------------

### Disable Pointer Cursor for Disabled Elements

Source: https://github.com/marsx-dev/floatui/blob/main/posts/getting-started.mdx

Ensures that disabled elements do not display the pointer cursor.

```CSS
:disabled {
  cursor: default;
}
```

--------------------------------

### SVG Icon Usage Example

Source: https://github.com/marsx-dev/floatui/blob/main/componentsDB/footers/footers-181aeccbae3c.mdx

Demonstrates how to use an SVG icon within an HTML structure. This example shows a basic inline SVG implementation, which is common for web interfaces.

```HTML
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 12h.01M6 12a6 6 0 1112 0 6 6 0 01-12 0z"></path></svg>
```

--------------------------------

### Control Textarea Resize

Source: https://github.com/marsx-dev/floatui/blob/main/posts/getting-started.mdx

Prevents textareas from being resized horizontally by default, allowing only vertical resizing.

```CSS
textarea {
  resize: vertical;
}
```

--------------------------------

### Create Account Form in React (JSX)

Source: https://github.com/marsx-dev/floatui/blob/main/componentsDB/authentication/authentication-ccedb97166eb.mdx

This snippet demonstrates a complete 'Create Account' form implemented in React using JSX. It includes input fields for name, email, and password, along with a submit button and an option to continue with Google authentication. The styling is handled by Tailwind CSS classes.

```jsx
function App() {
    return (
        <main className="w-full h-[800px] flex flex-col items-center justify-center bg-gray-50 sm:px-4">
            <div className="w-full space-y-6 text-gray-600 sm:max-w-md">
                <div className="text-center">
                    <img src="https://floatui.com/logo.svg" width={150} className="mx-auto" />
                    <div className="mt-5 space-y-2">
                        <h3 className="text-gray-800 text-2xl font-bold sm:text-3xl">Create an account</h3>
                        <p className="">Already have an account? <a href="javascript:void(0)" className="font-medium text-indigo-600 hover:text-indigo-500">Log in</a></p>
                    </div>
                </div>
                <div className="bg-white shadow p-4 py-6 sm:p-6 sm:rounded-lg">
                    <form
                        onSubmit={(e) => e.preventDefault()}
                        className="space-y-5"

                    >
                        <div>
                            <label className="font-medium">
                                Name
                            </label>
                            <input
                                type="text"
                                required
                                className="w-full mt-2 px-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg"
                            />
                        </div>
                        <div>
                            <label className="font-medium">
                                Email
                            </label>
                            <input
                                type="email"
                                required
                                className="w-full mt-2 px-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg"
                            />
                        </div>
                        <div>
                            <label className="font-medium">
                                Password
                            </label>
                            <input
                                type="password"
                                required
                                className="w-full mt-2 px-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg"
                            />
                        </div>
                        <button
                            className="w-full px-4 py-2 text-white font-medium bg-indigo-600 hover:bg-indigo-500 active:bg-indigo-600 rounded-lg duration-150"
                        >
                            Create account
                        </button>
                    </form>
                    <div className="mt-5">
                        <button
                            className="w-full flex items-center justify-center gap-x-3 py-2.5 mt-5 border rounded-lg text-sm font-medium hover:bg-gray-50 duration-150 active:bg-gray-100"
                        >
                            <img
                                src="https://raw.githubusercontent.com/sidiDev/remote-assets/7cd06bf1d8859c578c2efbfda2c68bd6bedc66d8/google-icon.svg"
                                alt="Google"
                                className="w-5 h-5"
                            />
                            Continue with Google
                        </button>
                    </div>
                </div>
            </div>
        </main>
    )
}
```

--------------------------------

### Feature Card Implementation

Source: https://github.com/marsx-dev/floatui/blob/main/componentsDB/feature-sections/feature-sections-afa753ebec53.mdx

Demonstrates the implementation of a feature card component using HTML and JavaScript. It includes an icon, title, description, and a 'Learn more' link.

```html
<section class="py-14">
  <div class="max-w-screen-xl mx-auto px-4 text-gray-600 md:px-8">
    <div class="max-w-xl space-y-3">
      <h3 class="text-gray-800 text-3xl font-semibold sm:text-4xl">
        Simple solutions for complex issues
      </h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue, nisl eget molestie varius, enim ex faucibus purus.
      </p>
    </div>
    <div class="mt-12">
      <ul class="grid gap-y-8 gap-x-12 sm:grid-cols-2 lg:grid-cols-3">
        {#each features as item (item.title)}
        <li class="flex gap-x-4">
          <div class="flex-none w-12 h-12 bg-indigo-600 text-white rounded-lg flex items-center justify-center">
            {@html item.icon}
          </div>
          <div class="space-y-3">
            <h4 class="text-lg text-gray-800 font-semibold">
              {item.title}
            </h4>
            <p>
              {item.desc}
            </p>
            <a href="{item.href}" class="text-sm text-indigo-600 duration-150 hover:text-indigo-400 font-medium inline-flex items-center gap-x-1">
              Learn more
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
                <path fill-rule="evenodd" d="M5 10a.75.75 0 01.75-.75h6.638L10.23 7.29a.75.75 0 111.04-1.08l3.5 3.25a.75.75 0 010 1.08l-3.5 3.25a.75.75 0 11-1.04-1.08l2.158-1.96H5.75A.75.75 0 015 10z" clip-rule="evenodd" />
              </svg>
            </a>
          </div>
        </li>
        {/each}
      </ul>
    </div>
  </div>
</section>
```

--------------------------------

### Set Summary Display

Source: https://github.com/marsx-dev/floatui/blob/main/posts/getting-started.mdx

Adds the correct display property for the 'summary' element in Chrome and Safari.

```CSS
summary {
  display: list-item;
}
```

--------------------------------

### Handle Hidden Attribute

Source: https://github.com/marsx-dev/floatui/blob/main/posts/getting-started.mdx

Ensures the default browser behavior for the 'hidden' attribute, setting its display to 'none'.

```CSS
[hidden] {
  display: none;
}
```

--------------------------------

### HTML Structure for Blog Component

Source: https://github.com/marsx-dev/floatui/blob/main/componentsDB/cards/cards-8ea106d2c788.mdx

This HTML snippet defines the structure for a blog section. It includes a main heading, a descriptive paragraph, and a grid layout to display individual blog posts. Each post is represented by an `<article>` tag containing a link, publication date, title, description, and a 'READ MORE' button with an icon. This structure is designed to be populated dynamically by JavaScript.

```html
<div class="mt-12 grid gap-4 divide-y md:grid-cols-2 md:divide-y-0 lg:grid-cols-3">
      <template x-for="(post, index) in posts" :key="index">
        <article class="mt-5 pt-8 md:pt-0">
          <a :href="post.href">
            <span
              class="block text-gray-400 text-sm"
              x-text="post.date"
            ></span>
            <div class="mt-2">
              <h3
                class="text-xl text-gray-900 font-semibold hover:underline"
                x-text="post.title"
              ></h3>
              <p
                class="text-gray-400 mt-1 leading-relaxed"
                x-text="post.desc"
              ></p>
            </div>
            <button
              class="mt-2 outline-none flex items-center text-[14px] text-blue-600 decoration-blue-600 hover:underline"
            >
              READ MORE
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-3 w-3 ml-2"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M17 8l4 4m0 0l-4 4m4-4H3"
                />
              </svg>
            </button>
          </a>
        </article>
      </template>
    </div>
```