List With Wrap

                    <ul class="flex flex-col bg-white rounded-lg shadow-md overflow-hidden">
  <li class="p-4 pb-2 text-xs text-gray-500 tracking-wide font-medium">
    Featured articles this week
  </li>
  
  <li class="grid grid-cols-[auto,1fr,auto,auto] items-start gap-3 px-4 py-3 hover:bg-gray-50 transition-colors">
    <div>
      <img class="w-10 h-10 rounded-lg object-cover" src="https://images.unsplash.com/photo-1504711434969-e33886168f5c?w=200" alt="Tech News"/>
    </div>
    <div>
      <div class="font-medium text-gray-800">The Future of AI Development</div>
      <div class="text-xs uppercase font-semibold text-gray-500">Technology Insights</div>
    </div>
    <div class="col-span-4 mt-2 pl-[calc(10px+0.75rem+3px)] pr-4 text-sm text-gray-600">
      Artificial intelligence continues to evolve at a rapid pace, transforming industries and creating new opportunities for innovation. Experts predict significant advancements in natural language processing and computer vision in the coming years.
    </div>
    <div class="col-span-4 flex justify-end gap-2 mt-2 pr-4">
      <button class="px-3 py-1 text-xs text-gray-600 hover:text-gray-900 rounded-full hover:bg-gray-100">
        Share
      </button>
      <button class="px-3 py-1 text-xs text-gray-600 hover:text-gray-900 rounded-full hover:bg-gray-100">
        Save
      </button>
    </div>
  </li>
  
  <li class="grid grid-cols-[auto,1fr,auto,auto] items-start gap-3 px-4 py-3 hover:bg-gray-50 transition-colors">
    <div>
      <img class="w-10 h-10 rounded-lg object-cover" src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=200" alt="Business"/>
    </div>
    <div>
      <div class="font-medium text-gray-800">Remote Work Trends in 2023</div>
      <div class="text-xs uppercase font-semibold text-gray-500">Workplace Culture</div>
    </div>
    <div class="col-span-4 mt-2 pl-[calc(10px+0.75rem+3px)] pr-4 text-sm text-gray-600">
      The shift to remote work continues to shape how companies operate and hire talent. This article explores the latest trends in distributed teams, hybrid work models, and the technologies enabling better collaboration across distances.
    </div>
    <div class="col-span-4 flex justify-end gap-2 mt-2 pr-4">
      <button class="px-3 py-1 text-xs text-gray-600 hover:text-gray-900 rounded-full hover:bg-gray-100">
        Share
      </button>
      <button class="px-3 py-1 text-xs text-gray-600 hover:text-gray-900 rounded-full hover:bg-gray-100">
        Save
      </button>
    </div>
  </li>
  
  <li class="grid grid-cols-[auto,1fr,auto,auto] items-start gap-3 px-4 py-3 hover:bg-gray-50 transition-colors">
    <div>
      <img class="w-10 h-10 rounded-lg object-cover" src="https://images.unsplash.com/photo-1496171367470-9ed9a91ea931?w=200" alt="Design"/>
    </div>
    <div>
      <div class="font-medium text-gray-800">UX Design for Accessibility</div>
      <div class="text-xs uppercase font-semibold text-gray-500">Design Principles</div>
    </div>
    <div class="col-span-4 mt-2 pl-[calc(10px+0.75rem+3px)] pr-4 text-sm text-gray-600">
      Creating inclusive digital experiences is not just a moral imperative but also good business. Learn how leading companies are implementing accessibility-first design approaches to serve all users regardless of ability.
    </div>
    <div class="col-span-4 flex justify-end gap-2 mt-2 pr-4">
      <button class="px-3 py-1 text-xs text-gray-600 hover:text-gray-900 rounded-full hover:bg-gray-100">
        Share
      </button>
      <button class="px-3 py-1 text-xs text-gray-600 hover:text-gray-900 rounded-full hover:bg-gray-100">
        Save
      </button>
    </div>
  </li>
</ul>