Can you write the html for two panels side by side that are max height and width using tailwind css?
Here's an example of HTML code using Tailwind CSS classes to create two side-by-side panels with maximum height and width:

```html
<div class=flex flex-wrap h-screen>
  <div class=w-full md:w-1/2 bg-gray-200 h-full>
    <!-- Content for the left panel -->
  </div>
  <div class=w-full md:w-1/2 bg-gray-300 h-full>
    <!-- Content for the right panel -->
  </div>
</div>
```

In this example, the parent `div` element has the `flex` and `flex-wrap` classes to enable flexbox and allow the panels to wrap on smaller screens. The `h-screen` class ensures that the panels occupy the full height of the screen.

Inside the parent `div`, we have two child `div` elements representing the left and right panels. The `w-full` class sets the width of each panel to 100% of the available space. The `md:w-1/2` class makes the panels take up 50% of the width on medium-sized screens and larger.

The `bg-gray-200` and `bg-gray-300` classes are used to set the background colors of the panels, but you can replace them with any other Tailwind CSS color classes or custom styles as needed.

By applying the `h-full` class to both panels, they will expand to the full height of the parent container, ensuring they have the same height.

Remember to include the necessary Tailwind CSS files in your project for the classes to take effect.
And what about using vanilla css?