gistfile1.txt

import React from 'react';

const categoriesClasses = [
    'position-relative',
    'textAlign-center',
].join(' ');

export default function Categories() {
    return (
        <div className={categoriesClasses}>
            <div className="cf">
                <div className="marginBottom-m">
                    <h4 className="fontSize-l lineHeight-s">Browse wireframing</h4>
                </div>
                <div style={{ marginTop: -15, marginLeft: -15 }}>
                    <div className="float-left width-33 paddingLeft-s paddingTop-s cursor-pointer">
                        <div className="marginBottom-xs">
                            <div className="aspectRatio aspectRatio--100">
                                <div className="aspectRatio-content">
                                    <div className="width-100 height-100 bg-pink borderRadius-m"></div>
                                </div>
                            </div>
                        </div>
                        <span className="fontSize-s">Web</span>
                    </div>
                    <div className="float-left width-33 paddingLeft-s paddingTop-s cursor-pointer">
                        <div className="marginBottom-xs">
                            <div className="aspectRatio aspectRatio--100">
                                <div className="aspectRatio-content">
                                    <div className="width-100 height-100 bg-pink borderRadius-m"></div>
                                </div>
                            </div>
                        </div>
                        <span className="fontSize-s">iOS</span>
                    </div>
                    <div className="float-left width-33 paddingLeft-s paddingTop-s cursor-pointer">
                        <div className="marginBottom-xs">
                            <div className="aspectRatio aspectRatio--100">
                                <div className="aspectRatio-content">
                                    <div className="width-100 height-100 bg-pink borderRadius-m"></div>
                                </div>
                            </div>
                        </div>
                        <span className="fontSize-s">Material</span>
                    </div>
                </div>
            </div>
            <div className="bg-smoke centered marginTopBottom-m" style={{ width: 60, height: 1 }}></div>
            <div className="cf">
                <div className="marginBottom-m">
                    <h4 className="fontSize-l lineHeight-s">Browse design assets</h4>
                </div>
                <div style={{ marginTop: -15, marginLeft: -15 }}>
                    <div className="float-left width-33 paddingLeft-s paddingTop-s cursor-pointer">
                        <div className="marginBottom-xs">
                            <div className="aspectRatio aspectRatio--100">
                                <div className="aspectRatio-content">
                                    <div className="width-100 height-100 bg-pink borderRadius-m centered"></div>
                                </div>
                            </div>
                        </div>
                        <span className="fontSize-s">Icons</span>
                    </div>
                    <div className="float-left width-33 paddingLeft-s paddingTop-s cursor-pointer">
                        <div className="marginBottom-xs">
                            <div className="aspectRatio aspectRatio--100">
                                <div className="aspectRatio-content">
                                    <div className="width-100 height-100 bg-pink borderRadius-m centered"></div>
                                </div>
                            </div>
                        </div>
                        <span className="fontSize-s">Stock pics</span>
                    </div>
                    <div className="float-left width-33 paddingLeft-s paddingTop-s cursor-pointer">
                        <div className="marginBottom-xs">
                            <div className="aspectRatio aspectRatio--100">
                                <div className="aspectRatio-content">
                                    <div className="width-100 height-100 bg-pink borderRadius-m centered"></div>
                                </div>
                            </div>
                        </div>
                        <span className="fontSize-s">Avatars</span>
                    </div>
                    <div className="float-left width-33 paddingLeft-s paddingTop-s cursor-pointer">
                        <div className="marginBottom-xs">
                            <div className="aspectRatio aspectRatio--100">
                                <div className="aspectRatio-content">
                                    <div className="width-100 height-100 bg-pink borderRadius-m centered"></div>
                                </div>
                            </div>
                        </div>
                        <span className="fontSize-s">Layouts</span>
                    </div>
                    <div className="float-left width-33 paddingLeft-s paddingTop-s cursor-pointer">
                        <div className="marginBottom-xs">
                            <div className="aspectRatio aspectRatio--100">
                                <div className="aspectRatio-content">
                                    <div className="width-100 height-100 bg-pink borderRadius-m centered"></div>
                                </div>
                            </div>
                        </div>
                        <span className="fontSize-s">Illustrations</span>
                    </div>
                    <div className="float-left width-33 paddingLeft-s paddingTop-s cursor-pointer">
                        <div className="marginBottom-xs">
                            <div className="aspectRatio aspectRatio--100">
                                <div className="aspectRatio-content">
                                    <div className="width-100 height-100 bg-pink borderRadius-m centered"></div>
                                </div>
                            </div>
                        </div>
                        <span className="fontSize-s">Colors</span>
                    </div>
                </div>
            </div>
            <div className="bg-smoke centered marginTopBottom-m" style={{ width: 60, height: 1 }}></div>
            <div className="cf">
                <div className="marginBottom-m">
                    <h4 className="fontSize-l lineHeight-s">Your library</h4>
                </div>
                <div style={{ marginTop: -15, marginLeft: -15 }}>
                    <div className="float-left width-33 paddingLeft-s paddingTop-s cursor-pointer">
                        <div className="marginBottom-xs">
                            <div className="aspectRatio aspectRatio--100">
                                <div className="aspectRatio-content">
                                    <div className="width-100 height-100 bg-pink borderRadius-m centered"></div>
                                </div>
                            </div>
                        </div>
                        <span className="fontSize-s">Deliveroo</span>
                    </div>
                    <div className="float-left width-33 paddingLeft-s paddingTop-s cursor-pointer">
                        <div className="marginBottom-xs">
                            <div className="aspectRatio aspectRatio--100">
                                <div className="aspectRatio-content">
                                    <div className="width-100 height-100 bg-blue--l borderRadius-m centered"></div>
                                </div>
                            </div>
                        </div>
                        <span className="fontSize-s">Create new</span>
                    </div>
                </div>
            </div>
        </div>
    );
}