Icon list

<ul class="list-none space-y-3 max-w-lg">
  <li class="flex gap-1.5">
    <div class="icon-[material-symbols--check-circle] size-6 shrink-0 text-green-50v"></div>
    <div>
      <p>Wash your hands for 20 seconds with soap</p>
    </div>
  </li>
  <li class="flex gap-1.5">
    <div class="icon-[material-symbols--check-circle] size-6 shrink-0 text-green-50v"></div>
    <div>
      <p>Stay six feet away from others</p>
    </div>
  </li>
  <li class="flex gap-1.5">
    <div class="icon-[material-symbols--cancel] size-6 shrink-0 text-red-50v"></div>
    <div>
      <p>Avoid large gatherings</p>
    </div>
  </li>
</ul>

<p class="mb-4">Benefits of joining Global Entry program:</p>
<ul class="list-none space-y-3 max-w-lg">
  <li class="flex gap-1.5">
    <div class="icon-[material-symbols--thumb-up] size-6 shrink-0 text-blue-60v"></div>
    <div>
      <p>No processing lines</p>
    </div>
  </li>
  <li class="flex gap-1.5">
    <div class="icon-[material-symbols--thumb-up] size-6 shrink-0 text-blue-60v"></div>
    <div>
      <p>Access to expedited entry benefits in other countries</p>
    </div>
  </li>
  <li class="flex gap-1.5">
    <div class="icon-[material-symbols--thumb-up] size-6 shrink-0 text-blue-60v"></div>
    <div>
      <p>Available at major U.S. airports</p>
    </div>
  </li>
  <li class="flex gap-1.5">
    <div class="icon-[material-symbols--thumb-up] size-6 shrink-0 text-blue-60v"></div>
    <div>
      <p>Reduced wait times</p>
    </div>
  </li>
</ul>

<ul class="list-none space-y-3 max-w-lg">
  <li class="flex gap-1.5">
    <div class="icon-[material-symbols--check-circle] size-6 shrink-0"></div>
    <div>
      <h3 class="font-bold font-merriweather">Donate cash when possible.</h3>
      <p class="mt-2">Financial contributions to recognized disaster relief organizations are the fastest, most flexible and most effective method of donating. Organizations on the ground know what items and quantities are needed, often buy in bulk with discounts and, if possible, purchase through businesses local to the disaster, which supports economic recovery.</p>
    </div>
  </li>
  <li class="flex gap-1.5">
    <div class="icon-[material-symbols--check-circle] size-6 shrink-0"></div>
    <div>
      <h3 class="font-bold font-merriweather">Confirm what donations are needed.</h3>
      <p class="mt-2">Unneeded and unsolicited goods burden local organizations’ ability to meet survivors’ confirmed needs, drawing away valuable volunteer labor, transportation and warehouse space.</p>
    </div>
  </li>
  <li class="flex gap-1.5">
    <div class="icon-[material-symbols--check-circle] size-6 shrink-0"></div>
    <div>
      <h3 class="font-bold font-merriweather">Talk to trusted organizations about volunteering.</h3>
      <p class="mt-2">Financial contributions to recognized disaster relief organizations are the fastest, most flexible and most effective method of donating. Organizations on the ground know what items and quantities are needed, often buy in bulk with discounts and, if possible, purchase through businesses local to the disaster, which supports economic recovery.</p>
    </div>
  </li>
</ul>

<ul class="list-none space-y-3">
  <li class="flex gap-1.5">
    <div class="icon-[material-symbols--help] size-8 shrink-0 text-blue-50v"></div>
    <div>
      <p class="text-xl pt-0.5"><span class="font-bold">Timing.</span> Is now the right time to start a business?</p>
    </div>
  </li>
  <li class="flex gap-1.5">
    <div class="icon-[material-symbols--help] size-8 shrink-0 text-blue-50v"></div>
    <div>
      <p class="text-xl pt-0.5"><span class="font-bold">Funding.</span> Do I have enough money to launch a business?</p>
    </div>
  </li>
  <li class="flex gap-1.5">
    <div class="icon-[material-symbols--help] size-8 shrink-0 text-blue-50v"></div>
    <div>
      <p class="text-xl pt-0.5"><span class="font-bold">Need.</span> Will this business fill a real need for my customers?</p>
    </div>
  </li>
</ul>

<p class="mb-4">Here are a few easy ways you can help reduce energy use and costs while spending more time at home.</p>
<ul class="list-none space-y-3 max-w-lg">
  <li class="flex gap-1.5">
    <div class="icon-[material-symbols--attach-money] size-8 text-green-50v shrink-0"></div>
    <div>
      <h3 class="font-bold font-merriweather text-lg pt-0.5">Let the sun shine.</h3>
      <p class="mt-2">On sunny days, open your curtains to allow the sun to naturally warm the rooms of your home without using electricity. Natural sunlight can also lift your mood to help brighten your day. On warm days, close your curtains to help keep your house cool.</p>
    </div>
  </li>
  <li class="flex gap-1.5">
    <div class="icon-[material-symbols--attach-money] size-8 text-green-50v shrink-0"></div>
    <div>
      <h3 class="font-bold font-merriweather text-lg pt-0.5">Adjust your schedule.</h3>
      <p class="mt-2">Instead of running high-energy-use appliances such as dishwashers and clothes dryers during mid-afternoon or early evening hours, operate them early in the morning or late at night. Some utilities charge less at off-peak times, which will help reduce your costs.</p>
    </div>
  </li>
  <li class="flex gap-1.5">
    <div class="icon-[material-symbols--attach-money] size-8 text-green-50v shrink-0"></div>
    <div>
      <h3 class="font-bold font-merriweather text-lg pt-0.5">Fill it up.</h3>
      <p class="mt-2">Wash full loads, whether it’s clothes or dishes. Washing multiple small loads means you’re using and heating more water, which can increase your expenses. Using cold water for clothes washing can also help lower your costs.</p>
    </div>
  </li>
</ul>