<div class="pricing‐table‐3">

    <!‐‐ Billing Cycle  ‐‐>

    <!‐‐ Pricing Plans Container ‐‐>
    <div class="d‐flex pricing‐plans‐container mt‐5 billed‐yearly">
        <!‐‐ Plan ‐‐>
        <div class="pricing‐plan plan‐basic mb‐5 active">

                            
            <div class="pricing‐header‐section  mb‐5 pb‐5">
                <div class="pricing‐header  mb‐4">
                    <h3>Basic</h3>
                    <p>Forever</p>
                </div>

                <div class="pricing‐header‐pricing">
                    <p class="pricing monthly‐pricing">Free</p>
                    <p class="pricing yearly‐pricing">$ 5.50</p>
                    <p class="sub‐title monthly‐pricing‐label ms‐1 d‐none">/ mo</p>
                </div>
            </div>
            
            <div class="pricing‐plan‐features mb‐5">
                <div class="d‐flex align‐items‐center justify‐content‐between mb‐4">
                    <h5>Features</h5>
                    <p>All</p>
                </div>
                
                <ul class="list‐unstyled">
                    <li><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="feather feather‐check"><polyline points="20 6 9 17 4 12"></polyline></svg></span> 3 prototypes</li>
                    <li><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="feather feather‐check"><polyline points="20 6 9 17 4 12"></polyline></svg></span> 3 boards</li>
                    <li><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="feather feather‐check"><polyline points="20 6 9 17 4 12"></polyline></svg></span> Up to 5 team members</li>
                </ul>
            </div>
            <a href="javascript:void(0);" class="button btn btn‐gradient‐dark btn‐block margin‐top‐20 btn‐pricing‐btn w‐100">Current Plan</a>
        </div>
        
        <!‐‐ Plan ‐‐>
        <div class="pricing‐plan plan‐starter mb‐5 recommanded">

            <div class="pricing‐plan‐popular">
                <span class="badge badge‐pill badge‐light‐success">Popular</span>
            </div>
            
            <div class="pricing‐header‐section mb‐5 pb‐5">
                <div class="pricing‐header mb‐4">
                    <h3>Starter</h3>
                    <p>Saving $24 a year</p>
                </div>

                <div class="pricing‐header‐pricing">
                    <p class="pricing dollar‐pricing">$</p>
                    <p class="pricing monthly‐pricing">19.50</p>
                    <p class="pricing yearly‐pricing">$ 9.50</p>
                    <p class="sub‐title monthly‐pricing‐label ms‐1">/mo</p>
                </div>
            </div>
            
            <div class="pricing‐plan‐features mb‐5">
                <div class="d‐flex align‐items‐center justify‐content‐between mb‐4">
                    <h5>Features</h5>
                    <p>All</p>
                </div>
                
                <ul class="list‐unstyled">
                    <li><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="feather feather‐check"><polyline points="20 6 9 17 4 12"></polyline></svg></span> 3 prototypes</li>
                    <li><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="feather feather‐check"><polyline points="20 6 9 17 4 12"></polyline></svg></span> 3 boards</li>
                    <li><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="feather feather‐check"><polyline points="20 6 9 17 4 12"></polyline></svg></span> Up to 5 team members</li>
                    <li><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="feather feather‐check"><polyline points="20 6 9 17 4 12"></polyline></svg></span> Advanced security</li>
                    <li><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="feather feather‐check"><polyline points="20 6 9 17 4 12"></polyline></svg></span> Issue escalation</li>
                </ul>
            </div>
            <a href="javascript:void(0);" class="button btn btn‐gradient‐primary btn‐block margin‐top‐20 btn‐pricing‐btn w‐100">Choose Starter</a>
        </div>

        <!‐‐ Plan ‐‐>
        <div class="pricing‐plan plan‐premium mb‐5">

            <div class="pricing‐header‐section mb‐5 pb‐5">
                <div class="pricing‐header mb‐4">
                    <h3>Premium</h3>
                    <p>Saving $124 a year</p>
                </div>

                <div class="pricing‐header‐pricing">
                    <p class="pricing dollar‐pricing">$</p>
                    <p class="pricing monthly‐pricing">29.50</p>
                    <p class="pricing yearly‐pricing">$ 19.50</p>
                    <p class="sub‐title monthly‐pricing‐label ms‐1">/mo</p>
                </div>
            </div>
            
            <div class="pricing‐plan‐features mb‐5">
                <div class="d‐flex align‐items‐center justify‐content‐between mb‐4">
                    <h5>Features</h5>
                    <p>All</p>
                </div>

                <ul class="list‐unstyled">
                    <li><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="feather feather‐check"><polyline points="20 6 9 17 4 12"></polyline></svg></span> 3 prototypes</li>
                    <li><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="feather feather‐check"><polyline points="20 6 9 17 4 12"></polyline></svg></span> 3 boards</li>
                    <li><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="feather feather‐check"><polyline points="20 6 9 17 4 12"></polyline></svg></span> Up to 5 team members</li>
                    <li><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="feather feather‐check"><polyline points="20 6 9 17 4 12"></polyline></svg></span> Advanced security</li>
                    <li><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="feather feather‐check"><polyline points="20 6 9 17 4 12"></polyline></svg></span> Issue escalation</li>
                    <li><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="feather feather‐check"><polyline points="20 6 9 17 4 12"></polyline></svg></span> Issue development license</li>
                    <li><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="feather feather‐check"><polyline points="20 6 9 17 4 12"></polyline></svg></span> Permissions & workflows</li>
                </ul>
            </div>
            <a href="javascript:void(0);" class="button btn btn‐gradient‐secondary btn‐block margin‐top‐20 btn‐pricing‐btn w‐100">Choose Premium</a>
        </div>
    </div>
    
</div>