title: Image shrinks in responsive view with tailwind
body: <p>So I am working on a project with React and Tailwind. I have a component that has an image and text and on small screens I have it laid out like so.</p>
  <p><a href="https://i.stack.imgur.com/d6hku.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/d6hku.png" alt="enter image description here" /></a></p>
  <p>The component is the card under the word &quot;Events&quot;. This looks exactly how I want it to look and on larger screens I want it to be more horizontal like so:</p>
  <p><a href="https://i.stack.imgur.com/yDPuo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yDPuo.png" alt="enter image description here" /></a></p>
  <p>So these 2 are exactly how I want. The issue is, when I resize the window, there is a size (maybe between md and sm) where the image shrinks and doesnt fill the card, here is an image of it happening</p>
  <p><a href="https://i.stack.imgur.com/yAdOc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yAdOc.png" alt="enter image description here" /></a></p>
  <p>So you can see the image height only takes up around 2/3 of the height of the card, maybe in this instance I can change the width of the image to be half of the card but I have attempted and cannot do it.</p>
  <p>Below is the code for the component:</p>
  <pre><code>&lt;div className='flex flex-col w-auto bg-white border border-gray-500 rounded-t-xl overflow-hidden lg:flex-row md:rounded-xl'&gt;
                  {/* Image Container */}
                  &lt;div className='xs:w-full lg:w-1/4'&gt;
                      &lt;img className='object-cover' src={event.featured_image} alt={event.title} /&gt;
                  &lt;/div&gt;
                  {/* Content Container */}
                  &lt;div className=&quot;flex flex-col justify-between p-2&quot;&gt;
                      {/* Content */}
                      &lt;div&gt;
                          &lt;p className='text-xl text-blue-700 font-semibold'&gt;{event.title}&lt;/p&gt;
                          &lt;p className='py-2 text-gray-700'&gt;{event.description}&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div className='pt-8 sm:pt-0'&gt;
                          &lt;p className='text-sm text-blue-500'&gt;{event.start_date}{event.end_date ? ` - ${event.end_date}` : ''}&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>