Period Tracker Chart - Copy this React, Tailwind Component to your project

User has to input 2 data entry points. Period start Date (Point A) Period end date (Point B) Point A calculates: 

 1. 28 days in the future period starts again (user then has to change this by input) 2. 14 days from Point A Ovulation Phase starts and lasts for 24 hours. Warning is given 3 days before and after as potential ovulation days. 3. 15 days from Point A Luteal Phase Starts and lasts for 14 days. 4. 5 days from Point A Period Phase ends and Follicular phase starts. In default 28 day cycle. Period Start date, period phase lasts for 5 days. 17,8% Follicular Phase starts lasts for 8 days. 28,57% Ovulation Phase starts lasts for 1 day. 3,75% (Warning is given 3 days (10%) before and after for margin of error) Luteal phase starts lasts for 14 days. 50% Next cycle User inputs Period start date again. Based on wether cycle is 28 days predictions change accordingly.