Accordion

<div class="accordion-group danger">
	<div class="accordion">
		<input class="toggle" id="accordion-color-danger-1" type="checkbox" />
		<label class="title" for="accordion-color-danger-1">
			<p>Toggle Accordion 1</p>
		</label>
		<div class="content">
			<div class="min-h-0">
				<p>
					Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla
					necessitatibus iusto laborum autem placeat aspernatur inventore eius
					deleniti reprehenderit? Numquam commodi totam mollitia quod
				</p>
			</div>
		</div>
	</div>
	<div class="accordion">
		<input class="toggle" id="accordion-color-danger-2" type="checkbox" />
		<label class="title" for="accordion-color-danger-2">
			<p>Toggle Accordion 2</p>
		</label>
		<div class="content">
			<div class="min-h-0">
				<p>
					Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla
					necessitatibus iusto laborum autem placeat aspernatur inventore eius
					deleniti reprehenderit? Numquam commodi totam mollitia quo
				</p>
			</div>
		</div>
	</div>
</div>

<div className='accordion-group danger'>
  <div className='accordion'>
    <input className='toggle'
      id='accordion-color-danger-1'
      type='checkbox' />
    <label className='title'
      htmlFor='accordion-color-danger-1'>
      <p>
        Toggle Accordion 1
      </p>
    </label>
    <div className='content'>
      <div className='min-h-0'>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat
aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
        </p>
      </div>
    </div>
  </div>
  <div className='accordion'>
    <input className='toggle'
      id='accordion-color-danger-2'
      type='checkbox' />
    <label className='title'
      htmlFor='accordion-color-danger-2'>
      <p>
        Toggle Accordion 2
      </p>
    </label>
    <div className='content'>
      <div className='min-h-0'>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat
aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quo
        </p>
      </div>
    </div>
  </div>
</div>

<div class="accordion-group bordered bw">
	<div class="accordion">
		<input class="toggle" id="accordion-bordered-bw-1" type="checkbox" />
		<label class="title" for="accordion-bordered-bw-1">
			<p>Toggle Accordion 1</p>
		</label>
		<div class="content">
			<div class="min-h-0">
				<p>
					Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla
					necessitatibus iusto laborum autem placeat aspernatur inventore eius
					deleniti reprehenderit? Numquam commodi totam mollitia quod
				</p>
			</div>
		</div>
	</div>
	<div class="accordion">
		<input class="toggle" id="accordion-bordered-bw-2" type="checkbox" />
		<label class="title" for="accordion-bordered-bw-2">
			<p>Toggle Accordion 2</p>
		</label>
		<div class="content">
			<div class="min-h-0">
				<p>
					Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla
					necessitatibus iusto laborum autem placeat aspernatur inventore eius
					deleniti reprehenderit? Numquam commodi totam mollitia quo
				</p>
			</div>
		</div>
	</div>
</div>

<div className='accordion-group bordered bw'>
  <div className='accordion'>
    <input className='toggle'
      id='accordion-bordered-bw-1'
      type='checkbox' />
    <label className='title'
      htmlFor='accordion-bordered-bw-1'>
      <p>
        Toggle Accordion 1
      </p>
    </label>
    <div className='content'>
      <div className='min-h-0'>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat
aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
        </p>
      </div>
    </div>
  </div>
  <div className='accordion'>
    <input className='toggle'
      id='accordion-bordered-bw-2'
      type='checkbox' />
    <label className='title'
      htmlFor='accordion-bordered-bw-2'>
      <p>
        Toggle Accordion 2
      </p>
    </label>
    <div className='content'>
      <div className='min-h-0'>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat
aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quo
        </p>
      </div>
    </div>
  </div>
</div>

<div class="accordion-group bw">
	<div class="accordion" tabindex="0">
		<label class="title"> Toggle Accordion 1 </label>
		<div class="content">
			<div class="min-h-0">
				<p>
					Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla
					necessitatibus iusto laborum autem placeat aspernatur inventore eius
					deleniti reprehenderit? Numquam commodi totam mollitia quod
				</p>
			</div>
		</div>
	</div>
	<div class="accordion" tabindex="0">
		<label class="title"> Toggle Accordion 2 </label>
		<div class="content">
			<div class="min-h-0">
				<p>
					Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla
					necessitatibus iusto laborum autem placeat aspernatur inventore eius
					deleniti reprehenderit? Numquam commodi totam mollitia quo
				</p>
			</div>
		</div>
	</div>
</div>

<div className='accordion-group bw'>
  <div className='accordion'
    tabIndex='0'>
    <label className='title'>
      Toggle Accordion 1
    </label>
    <div className='content'>
      <div className='min-h-0'>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat
aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
        </p>
      </div>
    </div>
  </div>
  <div className='accordion'
    tabIndex='0'>
    <label className='title'>
      Toggle Accordion 2
    </label>
    <div className='content'>
      <div className='min-h-0'>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat
aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quo
        </p>
      </div>
    </div>
  </div>
</div>

<div class="accordion-group bw">
	<div class="accordion open">
		<input class="toggle" id="accordion-fo-bw-1" type="checkbox" />
		<label class="title" for="accordion-fo-bw-1">
			<p>Toggle Accordion 1</p>
		</label>
		<div class="content">
			<div class="min-h-0">
				<p>
					Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla
					necessitatibus iusto laborum autem placeat aspernatur inventore eius
					deleniti reprehenderit? Numquam commodi totam mollitia quod
				</p>
			</div>
		</div>
	</div>
	<div class="accordion">
		<input class="toggle" id="accordion-fo-bw-2" type="checkbox" />
		<label class="title" for="accordion-fo-bw-2">
			<p>Toggle Accordion 2</p>
		</label>
		<div class="content">
			<div class="min-h-0">
				<p>
					Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla
					necessitatibus iusto laborum autem placeat aspernatur inventore eius
					deleniti reprehenderit? Numquam commodi totam mollitia quo
				</p>
			</div>
		</div>
	</div>
</div>

<div className='accordion-group bw'>
  <div className='accordion open'>
    <input className='toggle'
      id='accordion-fo-bw-1'
      type='checkbox' />
    <label className='title'
      htmlFor='accordion-fo-bw-1'>
      <p>
        Toggle Accordion 1
      </p>
    </label>
    <div className='content'>
      <div className='min-h-0'>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat
aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
        </p>
      </div>
    </div>
  </div>
  <div className='accordion'>
    <input className='toggle'
      id='accordion-fo-bw-2'
      type='checkbox' />
    <label className='title'
      htmlFor='accordion-fo-bw-2'>
      <p>
        Toggle Accordion 2
      </p>
    </label>
    <div className='content'>
      <div className='min-h-0'>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat
aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quo
        </p>
      </div>
    </div>
  </div>
</div>