import {Fragment} from '@wordpress/element';
import { __ } from '@wordpress/i18n';


const FeeProContent = () => {
    return (
        <Fragment>
            <div className="freepro-content-wrp">
               <div className="freepro-content-box">
                <ul>
                    <li className="freepro-tbl-heading">
                        <span>General Features</span>
                        <span>Free</span>
                        <span>Pro</span>
                    </li>
                    <li>
                        <span>Global color palette</span>
                        <span className="dashicons dashicons-yes"></span>
                        <span className="dashicons dashicons-yes"></span>
                        
                    </li>
                    <li>
                        <span>Global color palette</span>
                        <span className="dashicons dashicons-yes"></span>
                        <span className="dashicons dashicons-yes"></span>
                        
                    </li>
                    <li>
                        <span>Global color palette</span>
                        <span className="dashicons dashicons-yes"></span>
                        <span className="dashicons dashicons-no-alt"></span>
                        
                    </li>
                    <li>
                        <span>Global color palette</span>
                        <span className="dashicons dashicons-yes"></span>
                        <span className="dashicons dashicons-yes"></span>
                        
                    </li>
                    <li>
                        <span>Global color palette</span>
                        <span className="dashicons dashicons-yes"></span>
                        <span className="dashicons dashicons-yes"></span>
                        
                    </li>
                    <li>
                        <span>Global color palette</span>
                        <span className="dashicons dashicons-yes"></span>
                        <span className="dashicons dashicons-no-alt"></span>
                        
                    </li>
                    <li>
                        <span>Global color palette</span>
                        <span className="dashicons dashicons-yes"></span>
                        <span className="dashicons dashicons-no-alt"></span>
                        
                    </li>
                </ul>
                <ul>
                    <li className="freepro-tbl-heading">
                        <span>Header Feature</span>
                        <span>Free</span>
                        <span>Pro</span>
                    </li>
                    <li>
                        <span>Global color palette</span>
                        <span className="dashicons dashicons-yes"></span>
                        <span className="dashicons dashicons-yes"></span>
                        
                    </li>
                    <li>
                        <span>Global color palette</span>
                        <span className="dashicons dashicons-yes"></span>
                        <span className="dashicons dashicons-yes"></span>
                        
                    </li>
                    <li>
                        <span>Global color palette</span>
                        <span className="dashicons dashicons-yes"></span>
                        <span className="dashicons dashicons-no-alt"></span>
                        
                    </li>
                    <li>
                        <span>Global color palette</span>
                        <span className="dashicons dashicons-yes"></span>
                        <span className="dashicons dashicons-no-alt"></span>
                        
                    </li>
                    <li>
                        <span>Global color palette</span>
                        <span className="dashicons dashicons-yes"></span>
                        <span className="dashicons dashicons-yes"></span>
                        
                    </li>
                    <li>
                        <span>Global color palette</span>
                        <span className="dashicons dashicons-yes"></span>
                        <span className="dashicons dashicons-yes"></span>
                        
                    </li>
                    <li>
                        <span>Global color palette</span>
                        <span className="dashicons dashicons-yes"></span>
                        <span className="dashicons dashicons-no-alt"></span>
                        
                    </li>
                    <li>
                        <span>Global color palette</span>
                        <span className="dashicons dashicons-yes"></span>
                        <span className="dashicons dashicons-yes"></span>
                        
                    </li>
                    <li>
                        <span>Global color palette</span>
                        <span className="dashicons dashicons-yes"></span>
                        <span className="dashicons dashicons-yes"></span>
                        
                    </li>
                    <li>
                        <span>Global color palette</span>
                        <span className="dashicons dashicons-yes"></span>
                        <span className="dashicons dashicons-no-alt"></span>
                        
                    </li>
                </ul>
                </div> 
            </div>
        </Fragment>
    );
};

export default FeeProContent;