JSFiddle - React, Tailwind, and code Playground

by starbuck2511

HTML

<table>
    <thead>
        <tr>
            <th>Product</th>
            <th>Details</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
    <tr>
        <td>Red Apple</td>
        <td>
            <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac lorem ante. Vestibulum quis magna pretium, lacinia arcu at, condimentum odio. Ut ultrices tempor metus, sit amet tristique nibh vestibulum in. Pellentesque vel velit eget purus mollis placerat sed sit amet enim. Sed efficitur orci sapien, ac laoreet erat fringilla sodales.
            </div>
        </td>
        <td>U$ 0.12</td>
    </tr>
    </tbody>
</table>

CSS

table{
    border: 1px solid #ddd;    
}

table th,
table td
{
    vertical-align: top;
    text-align: left;
    border: 1px solid #ddd;
}


div{
    background-color: #ddd;
    width: 400px;
    
    
    overflow: hidden;
    
    -webkit-transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1);
    -moz-transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1);
    transition: max-height 1.5s ease cubic-bezier(0, 1.05, 0, 1);
		
    max-height: 2px
    ;
}

div:hover{
    -webkit-transition: max-height 2s ease;
    -moz-transition: max-height 2s ease;
    transition: max-height 2s ease;
    
    max-height: 400px;
}