G-Loot DS — form example

by Augustin Hiebel

HTML

<form action="#" method="POST">
  <section className='space-y-4'>
    <h2 className='h4 mb-8'>
      Profile
    </h2>
    <div className='w-full flex flex-col lg:flex-row gap-4 items-stretch lg:items-center'>
      <div className="flex-1 form-group">
        <label htmlFor="user-name">User name</label>
        <input type="text" name="user-name" id="user-name" />
      </div>
      <div className="flex-1 form-group">
        <label htmlFor="email">Email</label>
        <div className='input-group'>
          <button className='button button-sm button-tertiary'>
            <span>Change</span>
          </button>
          <input type="password" name="password" id="password" />
        </div>
      </div>
    </div>
    <div className='form-group'>
      <label htmlFor="about">About</label>
      <textarea id="about" name="about" rows="3"></textarea>
      <p className='text-ui-300 text-sm mt-1'>Brief description for your profile. URLs are hyperlinked.</p>
    </div>
    <div className='rounded border border-ui-600 p-4 text-center text-sm text-ui-300'>
      <span>G-LOOT ID:</span>
      <code className='font-bold font-body'>4769554309840896</code>
    </div>
    <div className='form-group'>
      <label htmlFor="avatar">Avatar</label>
      <div className='flex items-center gap-4'>
        <div className='avatar avatar-circle'>
          <div>
            <img src="https://res.cloudinary.com/gloot/image/upload/v1654063975/Marketing/2022_prototype/DummyContent/teams/teamlogo_CrocEsports.png" />
          </div>
        </div>
        <button className='button button-sm button-secondary'>
          <span>Change</span>
        </button>
      </div>
    </div>
    <div className='form-group'>
      <label>Cover photo</label>
      <div className='form-dropzone'>
        <label htmlFor='dropzone-file'>
          <div>
            <span className='icon text-4xl icon-image mb-4' />
            <p className='text-sm text-ui-200'><span className='font-semibold'>Click to...