1
export default function SwapWidget() {
2
        return (
3
            <div className="bg-slate-200 md:mx-auto">
4
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
5
                    <div className="w-full max-w mx-auto shadow rounded overflow-hidden shadow-lg">
6
                        <img className="w-full mx-auto" style={{ maxWidth: 200 }} src="https://kiba.app/static/media/download.e893807d.png" alt="Sunset in the mountains" />
7
                        <div className="px-6 py-4">
8
                            <div className="font-bold text-xl mb-2">Swap Widget Example</div>
9
                            <p className="text-gray-700 text-base">
10
                                <iframe src={'https://kiba.app/#/swap?embed=true&tokenAddress=0x005D1123878Fc55fbd56b54C73963b234a64af3c'}
11
                                    style={{ 
12
                                        height: 485, 
13
                                        border: '1px solid transparent', 
14
                                        width: '100% ', 
15
                                        background: "#fff", 
16
                                        borderRadius: 30 
17
                                }}>
18
                                </iframe>
19
                            </p>
20
                        </div>
21
                        <div className="px-6 pt-4 pb-2">
22
                        <span className="inline-block bg-gray-400 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#DEFI</span>
23
                            <span className="inline-block bg-gray-400 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#KIBA</span>
24
                            <span className="inline-block bg-gray-400 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#SWAP</span>
25
                        </div>
26
                    </div>
27
    
28
                    <div className="max-w shadow rounded overflow-hidden shadow-lg">
29
                        <img className="w-full mx-auto" style={{ maxWidth: 200 }} src="https://kiba.app/static/media/download.e893807d.png" alt="Sunset in the mountains" />
30
                        <div className="px-6 py-4">
31
                            <div className="font-bold text-xl mb-2">Chart    Widget Example</div>
32
                            <p className="text-gray-700 text-base">
33
                                <iframe src={'https://kiba.app/#/selective-charts/ethereum/0xbf6dcdfe6e138428f5abe709e33e8ac1f7780e48?embed=true&info=0&trades=1&trending=1&theme=dark'}
34
                                    style={{ 
35
                                        height: 500, 
36
                                        border: '1px solid #fff', 
37
                                        width: '100% ', 
38
                                        background: "#fff", 
39
                                        borderRadius: 60  
40
                                }}>
41
                                </iframe>
42
                            </p>
43
                        </div>
44
                        <div className="px-6 pt-4 pb-2">
45
                            <span className="inline-block bg-gray-400 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#DEFI</span>
46
                            <span className="inline-block bg-gray-400 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#KIBA</span>
47
                            <span className="inline-block bg-gray-400 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#CHARTS</span>
48
                        </div>
49
                    </div>
50
    
51
                </div>
52
    
53
            </div>
54
        )
55
    }