Profit Purchase Summary - Copy this Html, Tailwind Component to your project

Make this code responsive and attractive i dont like its ui design change its ui code using tailwindcss and make sure try not to change its ids and name.<h2 class="text 2xl font bold mb 4">Profit and Purchase Summary</h2> <! Form for selecting date range > <div class="mb 4"> <label for="start_date" class="block text gray 700">Start Date:</label> <input id="start_date" type="date" class="border border gray 300 rounded p 2 w full"> </div> <div class="mb 4"> <label for="end_date" class="block text gray 700">End Date:</label> <input id="end_date" type="date" class="border border gray 300 rounded p 2 w full"> </div> <button id="generate btn" class="bg blue 500 hover:bg blue 700 text white px 4 py 2 rounded">Generate</button> <! Display the profit and purchase summary > <div class="mt 6 p 4 bg white rounded shadow"> <p class="text lg">Total Orders Placed: <span id="total orders" class="font semibold"></span></p> <p class="text lg">Total Medicines Sold: <span id="total medicines" class="font semibold"></span></p> <p class="text lg">Unique Medicines Sold: <span id="unique medicines" class="font semibold"></span></p> <p class="text lg">Total Profit: <span id="profit sum" class="font semibold"></span></p> </div> <! List of unique medicines sold > <div class="mt 6 p 4 bg white rounded shadow"> <h3 class="text xl font bold mb 4">Unique Medicines Sold:</h3> <ul id="medicine list" class="list disc pl 5"></ul> </div> <! Pie chart for medicine quantities > <div class="mt 6 p 4 bg white rounded shadow"> <h3 class="text xl font bold mb 4">Medicine Quantities Sold</h3> <canvas id="medicine pie chart" width="400" height="400"></canvas> </div>