Lawyer Carousel - Copy this React, Tailwind Component to your project

<li class="bg white shadow md rounded lg overflow hidden list none"> <div class="flex flex col sm:flex row"> <! in loop lawfirms > <ins class="adsbygoogle" style="display:block" data ad client="ca pub 5580562148477832" data ad slot="9988920715" data ad format="auto" data full width responsive="true"></ins> <script> window.onload = function() { (adsbygoogle = window.adsbygoogle || []).push({}); } </script> </div> </li> @endif Please generate a carousel to surround this card. The carousel should have a dynamic height. <li class="bg white shadow md rounded lg overflow hidden list none relative"> <div class="flex flex col sm:flex row"> <! Logo > <div class="flex justify center items center bg gray 50 p 4 sm:w 1/4"> <a href="{{route('lawyer', [$lawyer >id, $lawyer >lawyer_slug])}}"> <img src="{{ asset('storage/'.$lawyer >head_shot_photo) }}" alt="{{$lawyer >full_names}} photo" class="w 30 h 30 object cover rounded full" /> </a> </div> <! Details > <div class="p 4 flex 1"> <h2 class="text xl font semibold text gray 800"><a href="{{route('lawyer', [$lawyer >id, $lawyer >lawyer_slug])}}">{{$lawyer >full_names}}</a></h2> <p class="text sm text gray 600">{{$lawyer >job_title}}</p> <p class="text sm text gray 500 mt 1">{{$lawyer >lawfirm >law_firm_name}}</p> <p class="text gray 700 text sm mt 2"> {!! Str::words(strip_tags($lawyer >description),50, '...') !!} </p> <div class="mt 4 flex space x 2"> <a href="{{route('lawyer', [$lawyer >id, $lawyer >lawyer_slug])}}" class="font medium text blue 600 dark:text blue 500 hover:underline"> View More </a> </div> </div> </div> </li>